Finding an object in array and taking values from that to present in a select list
For the first part use find method:
function findArrayElementByTitle(array, title) { return array.find((element) => { return element.title === title; })}It will return the first array element for which the condition element.title === title holds true.
If you need to get all items from array which have title: 'Table 1', you can use .filter(Example)., if you need only first item where title: 'Table 1' you can use .find(Example)
var App = React.createClass({ columns: function(condition) { return this.props.data .filter((e) => e.title === condition) .map(e => e.columns) .reduce((prev, current) => prev.concat(current), []) .map((column, index) => <p key={ index }>{ column.name }</p>) }, render: function() { const condition = 'Table 1'; return <div>{ this.columns( condition ) }</div>; }});const data = [{ lookups: [], rows: [{data: {a: 1, b: 2}}, {data: {a: 3, b: 4}}], title: "Table 1", columns: [{name: "a"}, {name: "b"}]}, { lookups: [], rows: [{data: {c: 5, d: 6}}, {data: {c: 7, d: 8}}], title: "Table 2", columns: [{name: "c"}, {name: "d"}]}, { lookups: [], rows: [], title: "Table 1", columns: [{name: "m"}, {name: "n"}]}];ReactDOM.render( <App data={ data } />, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="container"></div>
The below method will return the all the elements having the particular value(i.e in the below case it is isEdit:true).
filterArrayElementByEdit(array) { return array.filter((element) => { return element.isEdit === true; }) }Below method will return only the first element.
findArrayElementByEdit(array) { return array.find((element) => { return element.isEdit === true; }) }