B
B
Brake Made2018-04-11 15:41:22
React
Brake Made, 2018-04-11 15:41:22

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;

router
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;

parent
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);

I figured out how to output via location to the console the value that I set in input, but I don’t understand how to throw it into a component with api

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question