Can't populate multiple Autosuggest inputs at same time

I’m looking for advice on how to populate the values of two different Autosuggest input fields based on the selection of a Suggestion from only one of the input fields.

Best explained by looking at this GIF:https://gyazo.com/297abd6907b27b106858affa7c9956e3

The intended behavior is:

1. User types a value into either the “name” or “email” input
2. Autosuggest displays the list of suggestions
3. The user selects a suggestion
4. The input fields for BOTH “name” and “email” are then populated with the appropriate values

As you can see, everything is working fine to populate the value of the “name” field only, but I cannot figure out how to ALSO populate the “email” field.

My attempted solution was to:

1. store both the name and email values in a parent state
2. update that state inside getSuggestionValue
3. Pass the parent state down to the child component via props
4. Utilize componentWillReceiveProps to update the child state with the correct input values that are already being passed into <Autosuggest />

this.state = {
      name: props.nameInputValue,
      email: props.emailInputValue,
      suggestions: [
        {
          name: "testing",
          email: "[e-mail]",
        },

getSuggestionValue = suggestion => {
    if (this.props.type === "name") {
      console.log("Get Suggestion Value is firing");
      this.props.updateInputValues(suggestion.name, suggestion.email);
      return suggestion.name;
    } else if (this.props.type === "email") {
      this.props.updateInputValues(suggestion.name, suggestion.email);
      return suggestion.email;
    }
  };

  componentWillReceiveProps(nextProps) {
    console.log("component has props: ", this.props);
    console.log("component will receive new props: ", nextProps);
    this.setState({
      name: nextProps.name,
      email: nextProps.email,
    });
  }

When I attempt the above, I get an error from the Autosuggest component

Uncaught TypeError: Cannot read property 'trim' of undefined
    at Autosuggest.getQuery (Autosuggest.js:287)
    at Autosuggest.render (Autosuggest.js:507)
    at finishClassComponent (react-dom.development.js:10249)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)
getQuery @ Autosuggest.js:287
render @ Autosuggest.js:507
finishClassComponent @ react-dom.development.js:10249
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
index.js:2177 The above error occurred in the <Autosuggest> component:
    in Autosuggest (at AutoSuggest.js:123)
    in AutoSuggest (at ActionModal.js:53)
    in div (at ActionModal.js:47)
    in div (at ActionModal.js:46)
    in form (at ActionModal.js:40)
    in div (at ActionModal.js:39)
    in div (at ActionModal.js:38)
    in ActionModal (at Board.js:126)
    in CSSTransitionGroupChild (created by TransitionGroup)
    in span (created by TransitionGroup)
    in TransitionGroup (created by CSSTransitionGroup)
    in CSSTransitionGroup (at Board.js:120)
    in div (at Board.js:119)
    in Board (at App.js:191)
    in Route (at App.js:185)
    in Switch (at App.js:166)
    in div (at App.js:165)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:164)
    in div (at App.js:163)
    in App (created by Route)
    in Route (at index.js:12)
    in Switch (at index.js:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:10)

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.

[moroshko]

How about this?

[amitonkare]

@moroshko Is there a way to allow me to render multiple Autosuggests in a map()? With the examples here, i could see that i should have different suggestions array. But, I cannot create per Autosuggest a new array as I render it in map(). Any suggestions?