How to passing data through multiple component in react?

Question

I have 3 components: Layout App Products

My Layout has this form:

                  <form className='d-flex'>
                    <input
                      name='search'
                      className='form-control mr-2 shadow-none'
                      type='search'
                      placeholder='Search'
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                    />
                    <button className='btn btn-outline-secondary' type='submit'>
                      <SearchIcon />
                    </button>
                  </form>

I passed search and setSearch through props.

In my App has this logic:

  const [search, setSearch] = useState('');
    <Layout search={search} setSearch={setSearch}>  
        <Route exact path='/' search={search} component={Products} />
    </Layout>

I pulled the search result from the Layout and created a state in the App and then trying to pass to the Products component.

In the product when I try to console the search result I see only an undefined result

Wei J. Zheng · Accepted Answer · 2020-10-25 04:53:40Z

1

Your method doesn't work because you are passing the search value into the Route component instead of the component it render. You can use the render property of the Route to pass any props you want to the routing component https://reactrouter.com/web/api/Route/route-render-methods

 const [search, setSearch] = useState('');
 <Layout search={search} setSearch={setSearch}>  
    <Route exact path='/'
       render={props=> <Products {...props} search={search} setSearch={setSearch}/>} />
 </Layout>

However, I suggest using a state management tool like redux if the application is big or create a context provider https://reactjs.org/docs/context.html#when-to-use-context.

edited Oct 25, 2020 at 4:53

answered Oct 25, 2020 at 4:47

Wei J. Zheng

2693 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to passing data through multiple component in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related