React - filter by object property

Question

I am trying to filter object by property but I can't make it work.

Data in the object are structured like so:

I am fetching data by the UID and then mapping all the items from that object but I can't make the filter work.

Render method looks like so:

  render() {
    return(
      <div>
        {Object.keys(this.state.dataGoal)
          .filter(key => key.main == true)
          .map( (key, index) => {
            return <div key={key}>
                     <h1>{this.state.dataGoal[key].name}</h1>
                     <p>{this.state.dataGoal[key].main}</p>
                   </div>
          })}
      </div>

Any ideas what I am doing wrong?

Thanks for any help, Jakub

Answer 1

Assuming that this.state.dataGoal is the object from posted goals array, then your filter is wrong. Should be:

{Object.keys(this.state.dataGoal)
  .filter(key => this.state.dataGoal[key].main === true)
  .map((key, index) => {
    return <div key={key}>
             <h1>{this.state.dataGoal[key].name}</h1>
             <p>{this.state.dataGoal[key].main}</p>
           </div>
  })}

Note, that now it's .filter(key => this.state.dataGoal[key].main === true) because key is the string, something like Khasdfasdfasdfasdfads and you want to access goal object by this key in order to check its main property.