How to display an element from a true or false within the Object? Javascript ReactJs

Question

How to display an element from a true or false within the Object? Javascript ReactJs

Navigation

#1 by (2 votes)

2

I have an array of objects, and I want to display value from its status which is an attribute within the object.

this.state = {
  objetcs: [{
    value: 1,
    status: false
  }, {
    value: 2,
    status: true
  }]
}
}

// const object = [{ value: 1, status: false }, {value: 2, status: true} ]

If status is true I render it, if not, not render.

How can I do this?

javascript react

asked by anonymous 13.06.2018 / 21:41

1 answer

Why add a variable, property, method, etc. in a string does it work? Error using FuelPhp in version 7

score 2 · Accepted Answer

You can use .filter to filter state and then map to JSX you need. Notice that in your states you have objects written objetcs , I have corrected in the example down

class Componente extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      objects: [{
        value: 0,
        status: true
      }, {
        value: 1,
        status: false
      }, {
        value: 2,
        status: true
      }]
    }
  }

  render() {
    const activeElements = this.state.objects
      .filter(obj => obj.status)
      .map(obj => (<p>{obj.value}</p>));
    return (<div>{activeElements}</div>);
  }
}

ReactDOM.render( <Componente/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>