So, I want to know, how to update a single element in array of components?
class App extends React.Component {
render() {
const { current, items } = this.props;
return(
<div>
{ items.map(({ id, value }) => (
<div style={ { backgroundColor: (id === current.id ? 'cyan' : '') } }
key={ id }>
{ value }
</div>
))}
</div>
);
}
}
const items = [{ id: 1, value: 'A' }, { id: 2, value: 'B' }];
const current = items[0];
ReactDOM.render(<App items={ items } current={ current } />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
If I have 50 elements and I receive the current prop, then its map works again 50 times, but I want to re-render only the one element from this map if current.id === item.id. What do I need to do?