Passing input from header into component on rendered page

JavaScript
1

Hello, I have a question and seek advice or suggestions for a small problem.

I have a React project I am working on that has uses React Router to render a few different pages that show an index of objects.

I have a search input on the header component which is outside of the scope of every page due to it being in its natural position on top of the page.

I’ve passed the onChange event down to the App.js file which stores the value of the search field in state and then when the page is rendered, I pass the search into that page component.

I gain access to the text that is there at the point that the page gets rendered, however any change that occurs after that does not get travel into the component.

Does anybody have a good solution for me to pass the onChange event from the header into a page that gets rendered?

Thanks in advance <3

2 
componentDidUpdate(){
    if (this.state.searchField !== this.props.searchField) this.setState({searchField: this.props.searchField})
  }

Seems to be working so far…Still would love feedback though =)

3

Hard to tell from your description what exactly is going on, but why can’t you use this.props.searchField directly instead assigning it to state?
But in general what you did is ok.

4

Sorry for the rough description.

When I used this.props.searchField it would not get updates from the search input until a completely new page was rendered.
It would work fine if the search was on a submit button, however I want the page to update based upon what gets typed into the search field.

I think I understand what’s going on but I am still pretty green at this.

Thanks for your response =)

5

id look into react context. Its a good way to link state between unrelated components. Maybe make a conditional rendering, based on the state value.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.