React

by Konyrbayevv Kanaat

HTML

<div id="root"></div>

React

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      surname: ''

    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

	handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

 
  handleSubmit(event) {

    var name = this.state.name;
    this.props.inputName(name);
    event.preventDefault();
    
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
          <input type="text" name="surname" value={this.state.surname} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class App extends Component {

  constructor (){
    super();
    this.state={
      data: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }

  handleChange = (inputtedName) =>{
    const newItem={
      date: '15',
      gender: 'male',
      name: inputtedName,
      surname: 'haha',
    }
		this.setState(({data}) => {
      const newArr = [
        ... data,
        newItem
      ];

      console.log(newArr);
      return{
        data: newArr,
        value: '',
      }
		})
  }


  render() {
    return (
      <div className="App">
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.date}</span>
            <span>{value.name}</span>
            <span>{value.surname}</span>
          </div>

          )
        } 
        <NameForm inputName={this.handleChange} />
        
      </div>

    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));