import React, { Component } from 'react'; import {render} from 'react-dom'; import ItemsList from "../src/components/App" const propsValues = { title: "Список смартфонов", items: [ "HTC U Ultra", "iPhone 7", "Google Pixel", "Hawei P9", "Meizu Pro 6", "iPhone 7", "Asus Zenfone 3" ] }; render(<ItemsList data={propsValues} />, document.getElementById('root'));

component file itself

 import React, { Component } from 'react'; class Item extends React.Component { render() { return <li>{this.props.name}</li>; } } class ItemsList extends React.Component { render() { return( <div> <h2>{this.props.data.title}</h2> <ul> { this.props.data.items.map(function(item){ return <Item key={item} name={item} /> }) } </ul> </div>); } } export default ItemsList;

How to filter the necessary component in the list component? type instruction

 this.props.data.items.filter(function(item){ return <Item key={item} name={item === "iPhone 7"} /> })

does not work

    2 answers 2

    can be done as follows:

     render(){ let goodItems = this.props.data.items.filter(item => item === "iPhone 7"); return( <div> <h2>{this.props.data.title}</h2> <ul> { goodItems.map(item => <Item key={item} name={item} />) } </ul> </div> ); }
    • the value of "key" is also recommended to give the elements a unique (but not an index). In your case, key = {item} is not a good option - Zimovik007 February
    • And what's the point of first filtering and then rendering via map ()? Why not in one action? - Alexandr Tovmach 6:19 pm
    • In terms of readability - Zimovik007 February
    • And the performance? - Alexandr Tovmach
    • + - equivalent - Zimovik007 February
     render() { const { data: { items, title }} = this.props; return( <div> <h2>{title}</h2> <ul> {items.map((item, i) => item === "iPhone 7" && <Item key={`item-${i}`} name={item} />)} </ul> </div> ); }