Handling props in React efficiently is crucial for ensuring smooth functionality and avoiding unnecessary errors in the browser console. In this tutorial, you’ll learn how to filter props to avoid passing invalid attributes to HTML elements, making your React components cleaner and error-free.

---

Why Filtering Props Matters

When building React components, developers often pass props for configuration or logic. However, some of these props might not correspond to valid HTML attributes. Passing such props to HTML elements leads to console errors and potential unintended behavior. By filtering these props, we ensure compliance with HTML standards and maintain clean code.

---

Step 1: Identifying the Problem

Scenario

Imagine a Jumbotron component receiving a prop like containerFluid. This prop is vital for internal logic but is not recognized as a valid HTML attribute for a <div> element.

The Error

React warns you in the console:
Warning: Unknown prop 'containerFluid' on <div> tag.

To solve this, we need to strip out non-HTML props before passing them to native elements.

---

Step 2: Duplicating and Filtering Props

1. Start with a Copy of Props
   Use Object.assign to create a copy of all props received by the component:

   const props = Object.assign({}, this.props);
   

2. Filter Out Unnecessary Props
   Delete any props that aren’t meant for the HTML element. For example:

   delete props.containerFluid;
   

3. Pass Only Valid Props
   Use the filtered props object when rendering your HTML element:

   <div {...props} className="jumbotron">
       {this.props.children}
   </div>
   

---

Step 3: Example Implementation

Modified Jumbotron Component

class Jumbotron extends React.Component {
    render() {
        const props = Object.assign({}, this.props);
        const fluid = props.containerFluid; // Extract the custom prop
        delete props.containerFluid; // Remove it from the props object
        
        return (
            <div {...props} className={`jumbotron ${fluid ? 'jumbotron-fluid' : ''}`}>
                {this.props.children}
            </div>
        );
    }
}

Why This Works

• The Object.assign method creates a shallow copy of the props, leaving the original untouched.
• Deleting containerFluid ensures it doesn’t appear as an attribute in the final rendered HTML.
• The fluid variable is used internally to determine the appropriate class name.

---

Step 4: Test the Solution

1. Add a containerFluid prop to your Jumbotron component in the app:

   <Jumbotron containerFluid={true}>
       <h1>Welcome</h1>
   </Jumbotron>
   

2. Inspect the element in the browser:

   • Verify that the <div> has the correct class (jumbotron jumbotron-fluid).
   • Confirm there is no containerFluid attribute in the rendered HTML.

3. Check the console for errors — there should be none.

---

Next Steps

This technique ensures your React components handle props cleanly, keeping your application error-free. In the next tutorial, we’ll build on this concept by dynamically handling child components within our Jumbotron. This will further enhance its reusability and dynamic capabilities.