score:2

Accepted answer
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Engine extends React.Component {
  state = {
    types: ["Diesel", "Gazoline", "Simple"]
  };

  addItem = item => {
    this.setState({
      types: [...this.state.types, item]
    });
  };

  render() {
    return (
      <div>
        <Car type={this.state.types} addItem={this.addItem} />
      </div>
    );
  }
}

class Car extends React.Component {
  open = e => {
    e.preventDefault();

    let addItem = e.target.elements.type.value;

    if (addItem) {
      this.props.addItem(addItem);
    }
  };

  render() {
    return (
      <div>
        <h1>
          {this.props.type.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </h1>
        <form onSubmit={this.open}>
          <input type="text" name="type" />
          <button>Remo all</button>
        </form>
      </div>
    );
  }
}

const box = document.querySelector(".mir");

const rootElement = document.getElementById("root");
ReactDOM.render(<Engine />, rootElement);

score:0

class Engine extends React.Component {
  state = {
     types: ["Diesel", "Gazoline", "Simple"]
  }
  addTypes = (value) => {
     this.setState(prev => ({
          types: prev.types.concat(value)
     }))
  }
  render() {

    return (
      <div>
        <Car type={this.state.types} addTypes={this.addTypes} />
      </div>
    );
  }
}

class Car extends React.Component {
  openm(e) {
    let addItem = e.target.elements.type.value;

    if (addItem) {
      this.props.addTypes(additem);
    }
  }

  render() {
    return (
      <div>
        <h1>
          {this.props.type.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </h1>
        <form onSubmit={this.openm}>
          <input type="text" name="type" />
          <button>Remo all</button>
        </form>
      </div>
    );
  }
}

const box = document.querySelector(".mir");

ReactDOM.render(<Engine />, box);

score:0

class Engine extends React.Component {
  state={
    types : ["Diesel", "Gazoline", "Simple"]
  }

  addItem = (value) => {
    this.setState(prevState=>({
      ...prevState,
      types: prevState.types.concat(value)
    }))
  }
  render() {
    return (
      <div>
        <Car type={this.state.types} addItem={this.addItem}/>
      </div>
    );
  }
}

class Car extends React.Component {
  openm(e) {
    e.preventDefault();
    let item = e.target.elements.type.value;
    if (item) {
      this.props.addItem(item);
    }
  }

  render() {
    return (
      <div>
        <h1>
          {this.props.type.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </h1>
        <form onSubmit={this.openm.bind(this)}>
          <input type="text" name="type" />
          <button>Remo all</button>
        </form>
      </div>
    );
  }
}

Related Query

More Query from same tag