readItem = (id) => {
    const readItem = this.state.auto.filter((el) => el.id === id)
    this.setState({readItem})
  }

<Header readItem={this.state.readItem}/>

constructor(props) {
    super(props);
    this.state = {
      id: this.props.readItem.id,
      name: this.props.readItem.name,
      marka: this.props.readItem.marka,
      country: this.props.readItem.country,
      price: this.props.readItem.price,
      url: this.props.readItem.url
    }
  }

<input
      name="name"
      value={name}
      onChange={this.inputName}
      placeholder="Название" />

import React, { Component } from 'react';
import './App.css';
import Header from './component/Header/Header'
import ListAuto from './component/ListAuto/ListAuto'
import EditItems from './component/Edit/EditItems'

class App extends Component {
  state = {
    auto: [
      {
        "id": 1,
        "name": "Авто №1",
        "marka": "Марка машины №1",
        "price": 50,
        "country": "Russia",
        "url": "https://finance.liga.net/images/general/2018/08/29/thumbnail-tw-20180829113845-1826.jpg"
      },
      {
        "id": 2,
        "name": "Авто №2",
        "marka": "Марка машины №2",
        "price": 20,
        "country": "Russia",
        "url": "https://icdn.lenta.ru/images/2017/08/23/14/20170823145604779/pic_b21fd6a6551e45ce4a397c3c2662ec8f.jpg"
      },
    ],
    readItem: [{
      "id": null,
      "name": null,
      "marka": null,
      "price": null,
      "country": null,
      "url": null
    }]
  }

  addItem = (item) => {
    const addAuto = {
      id: this.state.auto.length + 1,
      name: item.name,
      marka: item.marka,
      price: item.price,
      country: item.country,
      url: item.url
    }
    this.setState(({ auto }) => {
      const NewArray = [
        ...auto,
        addAuto
      ]
      return {
        auto: NewArray
      }


    })
  }
  delItem = (id) => {
    const NewArr = this.state.auto.filter((el) => el.id !== id)
    this.setState({
      auto: NewArr
    })
  }
  readItem = (id) => {
    const readItem = this.state.auto.filter((el) => el.id === id)
    this.setState({readItem})
  }

  render() {
    const { auto } = this.state;
    return (
      <div className="App">
        <Header addItem={this.addItem}
                readItem={this.state.readItem}/>
        <EditItems ArrayAutoForRead={auto}
          delItemId={this.delItem}
          readItemId={this.readItem} />
        <ListAuto ArrayAuto={auto} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.readItem.id,
      name: this.props.readItem.name,
      marka: this.props.readItem.marka,
      country: this.props.readItem.country,
      price: this.props.readItem.price,
      url: this.props.readItem.url
    }
  }

  addItem = () => {
    const { name, marka, country, price, url } = this.state;
    if (name !== "" && marka !== "" && country !== "" && price !== "" && url !== "") {
      const item = {
        name,
        marka,
        country,
        price,
        url
      }
      this.props.addItem(item)
      this.setState({ name: "", marka: "", country: "", price: "", url: "" })
    } else {
      alert('Заполните все поля')
    }
  }
  inputName = (e) => {
    const name = e.target.value;
    this.setState({ name })
  }
  inputMarka = (e) => {
    const marka = e.target.value;
    this.setState({ marka })
  }
  inputCountry = (e) => {
    const country = e.target.value;
    this.setState({ country })
  }
  inputPrice = (e) => {
    const price = e.target.value;
    this.setState({ price })
  }
  inputUrl = (e) => {
    const url = e.target.value;
    this.setState({ url })
  }
  render() {
    const { name, marka, country, price, url } = this.state;
    return (
      <div className="Header">
        Header menu
              <input
          name="name"
          value={name}
          onChange={this.inputName}
          placeholder="Название" />
        <input
          name="marka"
          value={marka}
          onChange={this.inputMarka}
          placeholder="Марка" />
        <input
          name="country"
          value={country}
          onChange={this.inputCountry}
          placeholder="Производитель" />
        <input
          name="price"
          value={price}
          onChange={this.inputPrice}
          placeholder="Цена" />
        <input
          name="url"
          value={url}
          onChange={this.inputUrl}
          placeholder="url картинки" />

        <button onClick={this.addItem}>Добавить</button>

      </div>
    );
  }
}

export default Header;

import React, { Component } from 'react';
import './style.css'

class EditItems extends Component {
    delItem = (id) => {
        this.props.delItemId(id)
    }
    readItem = (id) => {
        this.props.readItemId(id)
    }
  render() {
      const {ArrayAutoForRead} = this.props
    return (
      <div className="EditItems">
            Редактирование данных
            <table >
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Название</th>
                    <th>Марка</th>
                    <th>Производитель</th>
                    <th className="th">url фото</th>
                    <th>Цена</th>
                    <th>Действие</th>
                </tr>
                </thead>
                <tbody>
                    {
                        ArrayAutoForRead.map( (item,index) => {
                            return (
                            <tr rey={index}>
                                <th>{item.id}</th>
                                <th>{item.name}</th>
                                <th>{item.marka}</th>
                                <th>{item.country}</th>
                                <th className="th">{item.url}</th>
                                <th>{item.price}</th>
                                <th><button onClick={() => this.readItem(item.id)}>Редакт</button><button onClick={() => this.delItem(item.id)}>X</button></th>
                            </tr>

                            )
                        })
                    }


                </tbody>
            </table>

      </div>
    );
  }
}

export default EditItems;

import React, { Component } from 'react';
import ItemAuto from '../ItemAuto/ItemAuto'


class ListAuto extends Component {
    render() {

        return (
            <>
                {
                    this.props.ArrayAuto.map((item, index) => {
                        return (
                            <div className="ListAuto">
                                <ItemAuto key={index} itemAuto={item} />
                            </div>
                        )
                    })
                }
            </>
        );
    }
}

export default ListAuto;