ReactJS search bar child to parent - reactjs

Question

I have a search bar component which is viewed on all pages of a project. Is there a way that I can have the same search bar component but have a property that I could pass so that it knows which data to search through. My search component is <SearchBar type="PASS THIS VALUE" /> and this is rendered:
import React, { Component } from 'react';
class SearchBar extends Component {
render () {
function handleClick(e) {
e.preventDefault();
console.log("Clicked!!!");
}
return (
<div className="row main-search">
<div className="column">
<form action="">
<fieldset>
<label htmlFor="search">
<input type="text" placeholder="Start typing..." id="search-box" />
</label>
</fieldset>
</form>
</div>
<div className="column">
<div className="float-right"><button className="add-new" onClick={handleClick}>Add New</button></div>
</div>
</div>
)
}
}
export default SearchBar;
If this isn't possible is there a way that the searchBar can know which page the user is on and know which data to search through?
Update:
I am using a router element and the searchBar component is located inside parent App.js. I'm using the router like:
<SearchBar />
<Route
exact path="/" children={({ match, ...rest }) => (
<TransitionGroup component={firstChild}>
{match && <TourList {...rest} />}
</TransitionGroup>
)}/>

Answer 1

You can access the props through this.props and set the value of input accordingly, but beware that the component will become controlled by react flow, you won't be able to change the input, thus you need onChange event handler for that and controlled local state version of that prop instead.
It may go like this:
import React, { Component } from 'react';
class SearchBar extends Component {
state = { // pass default value from "type" prop
type: this.props.type
};
// making sure we don't call setState excessively
// as per https://reactjs.org/docs/react-component.html#componentwillreceiveprops
componentWillReceiveProps(nextProps) {
if (nextProps.type !== this.props.type) {
this.setState({ type: nextProps.type });
}
}
// pulling out handleClick function from render()
// to avoid creating it on every render call
handleClick = (e) => {
e.preventDefault();
console.log("Clicked!!!");
}
// making sure we update our controlled component state
// so we can actually type and get the change back in the value
// more info here: https://reactjs.org/docs/forms.html#controlled-components
handleChange = e => {
this.setState({ type: e.target.value });
};
render () {
return (
<div className="row main-search">
<div className="column">
<form action="">
<fieldset>
<label htmlFor="search">
<input type="text"
placeholder="Start typing..."
id="search-box"
onChange={this.handleChange}
// listening for our local and controlled version
// of "type" prop that is now reacting both to
// parent prop change and to local input change through typing
value={this.state.type}/>
</label>
</fieldset>
</form>
</div>
<div className="column">
<div className="float-right">
<button className="add-new" onClick={handleClick}>Add New</button>
</div>
</div>
</div>
)
}
}
export default SearchBar;