I'm making a typeahead input using React and I'd like some input on where to place my state. I'm only using React, and not some architecture like Redux or what have you My root ponent looks like this:

import React, { Component } from 'react';
import InputSearch from './input_search';
import SearchHints from './search_hints';

class Main extends Component {
  constructor(props) {
    super(props)
    this.state =   
       /* Some state here? */
    }
  }

  render() {
    return (
      <InputSearch />
      <SearchHints />
    );
  }
}

The InputSearch obviously takes care of the <input /> markup and SearchHints takes care of rendering a list of suggestions as the user types

My question is whether or not I should keep my state in the root ponent, or place it in the different child ponents The state will contain logic for matching the user input to some data array of search suggestions, and also logic for updating the value from the a selected search hint into the input field. I feel like the logic between the two child ponents is kind of intermingled, which I why im unsure of where to place it.

I'm making a typeahead input using React and I'd like some input on where to place my state. I'm only using React, and not some architecture like Redux or what have you My root ponent looks like this:

import React, { Component } from 'react';
import InputSearch from './input_search';
import SearchHints from './search_hints';

class Main extends Component {
  constructor(props) {
    super(props)
    this.state =   
       /* Some state here? */
    }
  }

  render() {
    return (
      <InputSearch />
      <SearchHints />
    );
  }
}

The InputSearch obviously takes care of the <input /> markup and SearchHints takes care of rendering a list of suggestions as the user types

My question is whether or not I should keep my state in the root ponent, or place it in the different child ponents The state will contain logic for matching the user input to some data array of search suggestions, and also logic for updating the value from the a selected search hint into the input field. I feel like the logic between the two child ponents is kind of intermingled, which I why im unsure of where to place it.

• javascript
• reactjs

2 Answers 2

You should always maintain your state in your root ponent because flow of your app revolves around your root ponent.So you should plan your ponents accordingly.

In case you feel that maintaining state of your app in root is difficult and your sub ponents also need to maintain some local state then you should use stores(flux,redux).

Now looking at your problem statement keeping your state at root will be a simple solution as you can just pass your state to child ponents and do any putations you want to do in child ponents.Maintaining different states for each child ponent will make your code more plex.

To achieve this just set your state like something

{input:""}

in your inputsearch ponent you can do

function:method(event)
{

this.props.setInput(event)


}
<input type="text" onChange={this.setInput}/>

In your main root ponent

function:setInputAsState(input)
{
this.setState({


input:input
])

}
<inputsearch  setInput={this.setInputAsState}/>
<SearchHints state={this.state.input}/>

Now pute anything you want in SearchHints ponent. Hope you got an idea

I would keep in your root ponent what the user have already typed, and the last suggestion data shown. I would also pass these state members to the children.

I would go with something like this:

this.state = {
  text: "",
}

...

<InputSearch value={this.state.text} />

// 1st case:
<SearchHints query={this.state.text} /> 

// 2nd case:
<SearchHints hints={arrayOfSuggestions} />

// 3rd case:
<SearchHints>
  <Hint someProps />
  <Hint someProps />
  <Hint someProps />
</SearchHints>

In the first case, your element SearchHints looks for the suggestions.

Otherwise, you have to give it either an array of props or an array of children with the suggestions.