CODEWITHSUNDEEP
reactjssearchbar
user11416547
user11416547

Reputation:

How to get the initial data of the state in react

I am trying to implement a searchbox that will filter items that are coming from a rest endpoint and i can't get my head around how to keep the first state of the list because i need it to return it if the searchbox is empty... i try many examples with this.props.someItem but i always get error in the console TypeException i read about parent child components with no luck. Ive tried to make a child component do the query and fetch the data but then i didn't manage to get it into the parent class i tried "this.state = { foo[] : foo2 }"; not working i tried assign it directly foo = this.props.foo2; again with no luck i got TypeError. Sorry it can be easy question but i am very new to js and react. Thank you for any help in advance. 

  class About extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
        };

        this.handleChange = this.handleChange.bind(this);

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            items: nextProps.model
        });
    }

    componentDidMount() {
        fetch('something/')
            .then(res => res.json())
            .then((result) => {
                    this.setState({
                        items: result
                    });
                }
            )
    }

i have a function handleChange(e) => { }; how to get the initial state of the "items" array ? filteredList = this.props.items - ive tried this it gives me error TypeError: undefined ans also if i change the state it is ok but the original data is lost and i want to ask is it a good practice to fetch the data everytime if the query include the whole data for this view for example.

Upvotes: 0

Views: 1814

Answers (2)

Junius L
Junius L

Reputation: 16132

You'll need two arrays, one for original data and one for filtered data.

Your initial state will look like.

constructor(props) {
  super(props);

  this.state = {
    items: [],
    filteredList: [],
    isLoading: true, // show a spinner while fetching data from api
  };
  //....
}

Both of your arrays will have the same data, set the data from the api to both arrays.

componentDidMount() {
  fetch("something/")
    .then(res => res.json())
    .then(result => {
      this.setState({
        items: result,
        filteredList: result,
        isLoading: false,
      });
    });
}

Working demo

I've answered a similar question here

Upvotes: 0

Chase
Chase

Reputation: 2304

Try this:

class About extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        items: [],
        filteredItems: []
    };

    this.handleChange = this.handleChange.bind(this);

}
componentDidMount() {
    fetch('something/')
        .then(res => res.json())
        .then((result) => {
            this.setState({
                items: result
                //Note: You can set filteredItems here to result as well  
                //if you want it to start out unfiltered
            });
        }
        )
}
handleChange(evt) {
    const baseItems = this.state.items;
    //Your filtering logic here
    this.setState({ filteredItems: yourFilteredArray });
}

Upvotes: 1

Related Questions