Answer the question
In order to leave comments, you need to log in
Passing props through react-router, correct implementation?
Good day, tell me how to correctly pass props through withRouter.
input child
class SearchLanding extends React.Component{
state = {
searchValue : '',
}
onSearchChange = (event, searchValue) => {
this.setState({ searchValue });
};
render(){
const {searchValue} = this.state;
console.log(searchValue);
return(
<Center className={styles.parent} id="search">
<Center className={styles.input}>
<Input
leftIcon={<Icon name="search" />}
value= {this.state.searchValue}
width="700px"
placeholder="Введите Фамилию и Имя"
onChange={this.onSearchChange}
/> {' '}
<Link to={{
pathname: '/search',
state: { searchValue: this.state.searchValue },
}}><Button use="primary" onClick={this.onSearchClick}>Найти</Button></Link>
);
}
}
export default SearchLanding;
class SearchTable extends Component{
constructor(props) {
super(props)
console.log('SearchTable: ', props.location.state.searchValue)
};
render(props) {
return (
<div>
<HeaderResult/>
<InputResult searchValue={this.props.location.state.searchValue}/>
<Footer/>
</div>
);
}
}
export default SearchTable;
class InputResult extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: [],
searchValue: '' ,
};
}
componentDidMount(){
Api.users.search({ count: 15 })
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
}
);
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
.catch(error => console.log('parsing failed', error));
}
onSearchChange = (event, searchValue) => {
this.setState({ searchValue });
};
onSearchPress = (e) => {
if (e.key === 'Enter'){
this.onSearchClick();
}
};
onSearchClick = () => {
const { searchValue } = this.state;
Api.users.search({name: searchValue})
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
}
);
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
.catch(error => console.log('parsing failed', error));
}
render() {
const { items, error , isLoaded, searchValue} = this.state;
console.log(searchValue);
return (
<div>
<div className={styles.parentResult}>
<Center>
<div className={styles.input}>
<Input leftIcon={<Icon name="search" />}
value={this.state.searchValue}
width="700px"
placeholder="Введите Фамилию и Имя"
onChange={this.onSearchChange}
onKeyPress={this.onSearchPress}
/> {' '}
<Button use="primary" onClick={this.onSearchClick}>Найти</Button>
</div>
</Center>
</div>
<SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
</div>
)
}
}
export default withRouter(InputResult);
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question