CODEWITHSUNDEEP
reactjs
Akhil
Akhil

Reputation: 629

Filtering my table in react does not work

I am trying to implement a filter functionality in a component. The filtered rows depend upon the state object and the initial list is being passed through the 'props'. I initialize the state in componentWillMount but the list in props is always empty, however when I do a console.log in the render() method the values are there. What am I doing wrong ?

 componentDidMount() {
    this.setState({ 
      data: this.props.possibleValues,
      filteredValues: this.props.possibleValues
    });
    console.log(this.props.possibleValues) //empty
    console.log(this.state.filteredValues) //empty
  }

Upvotes: 0

Views: 1122

Answers (1)

ALM
ALM

Reputation: 2705

Its hard to say based on your description but if you are trying to pass the initial value via props and then have the values held within your state here is an example. The values for your filtered values are updated each time your onChange would be called in your render and stored within selected.

This will work for ansychronous calls, in your render you wait until the state is set on the parent object before allowing the child component to be rendered.

someAsyncSetup() {
... doing something   
        this.setState({
            possibleValues : possibleValues 
        });
}

Inside the componentDidMount() you set your state for possible values which is ansynchronous. Once you get your values call setState(). Then the render will wait until it is completed before creating the child component

{this.state.possibleValues != null &&...
    <ExampleChild...

Example of parent comp

constructor(props) {
    super(props);
    this.state = {possibleValues: null};
    this.onChange = this.onChange.bind(this);
    this.someAsyncSetup = this.someAsyncSetup.bind(this);
}

onChange(selected) {
    this.props.onChange({ selected });  // you may need to call your parent props again
}

someAsyncSetup() {
... doing something   
            this.setState({
                possibleValues : possibleValues 
            });
}

componentDidMount() {
    this.someAsyncSetup(); // inside here you set your state for possible values.  Then the render will wait until it is completed before creating the child component
}

 {this.state.possibleValues != null &&
                <ExampleChild
                    onChange={this.onChange}
                    possibleValues={this.state.possibleValues}
            }

Example of child comp

    class ExampleChild extends React.Component {
    constructor(props) {
        super(props);
        this.state = { selected: this.props.filteredValues };
        this.onChange = this.onChange.bind(this);
    }

    // onChange we want to set the list of selected values
    onChange(selected) {
        this.setState({ selected });
        // call the parent component's onChange so that we set the values
        // within the parents component state
        this.props.onChange(selected);
    }

    render() {
        return (
          <someComp
            options={this.props.possibleValues}
            selected={this.state.selected}
            defaultValue={this.props.filteredValues}
            onChange={this.onChange} />
        )
    }
}

Upvotes: 1

Related Questions