Passing props to state in top level component

Question

I'm trying to pass props using the handleUpdate function in my child component to my top level component and update the state with those props values. So far, I don't see the props appearing when I console log. I don't think I'm passing the correct arguments. I've tinkered around and am stuck. Can someone assist and explain their reasoning?

handleUpdate function in child component:

search = async (word) => {

        try{
            // var word = this.state.word.trim();
            const data = await MerriamAPI.getWordInfo(word);
            
            if (data){
                this.props.handleUpdate({
                    word: word,
                    info: data,
                    versions: data[0].meta.stems,
                    shortdef: data[0].shortdef[0],
                    partOfSpeech: data[0].fl,
                    pronunciation: data[0].hwi.prs[0].mw, 
                }, 
            }
            else{
                console.log('No Definition Found')
            }
        }
        catch{
            this.setState({error: 'No Definition Found'})
        }
        console.log(this.props)
    }

Parent component:

class App extends Component {

  state = {
    redirect: {},
    word: '',
    error: '',
    info: [],
    partOfSpeech: [],
    versions: [],
    shortdef: "",
    pronunciation: "",
  }
  

  setRedirect = redirect =>
    this.setState({redirect})


  handleUpdate = (props) => 
    this.setState({word:this.props})


render() {
    return (
      <>
        <Route 
          render={ routeProps => <Redirector redirect={this.state.redirect} setRedirect={this.setRedirect} {...routeProps} />}
        />
        <header>
          <nav>
            <Link to='/'>My Dictionary</Link>
          </nav>
        </header>

        <main>
        <Route
            render = { routeProps =>
              !routeProps.location.state?.alert ? '' :
              <div>
                { routeProps.location.state.alert }
              </div>
            }
          />
          <Switch>
            <Route exact path="/" render={ routeProps => <Home handleUpdate={this.handleUpdate} {...routeProps} />} />
            <Route exact path="/definition/:word" render={ routeProps => <GetWordContainer word={this.state.word} {...routeProps} />} />
          </Switch>
        </main>
      </>
    );
  }
}

export default App;

Drew Reese Drew Reese · Accepted Answer · 2020-07-17T06:47:06

If I can decipher your partial snippets, it seems handleUpdate in App is access the wrong "props" object, i.e. this.props of App instead of the passed props argument to the function.

Solution

Change the function parameter to something other than "props" to remove confusion, word is a great choice that allows you to also use object shorthand assignment.

handleUpdate = word => this.setState({ word });

Based on the object shape you pass to handleUpdate and your state object, I'm going to guess that you more likely want to spread in the object versus assigning it all to this.state.word

handleUpdate = values => this.setState({ ...values });

Passing props to state in top level component

1 Answers

Solution