reactjs_quickstart

reactjs_quickstart

import React, { Component } from "react";
import axios from "axios";

class Row extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.data.id}</td>
        <td>{this.props.data.name}</td>
      </tr>
    );
  }
}

class App extends Component {
  state = {
    name: "",
    persons: [],
    data: [
      {
        id: 1,
        name: "Foo"
      },
      {
        id: 2,
        name: "Bar"
      }
    ]
  };

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then(res => {
      const persons = res.data;
      this.setState({ persons });
    });
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();

    console.log(this.state.name);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Que cherchez vous ?:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Ok</button>
        </form>
        <br></br>
        <ul>
          {this.state.persons.map(person => (
            <li key={person.id} >{person.name}</li>
          ))}
        </ul>

        <table>
          <tbody>
            {this.state.data.map((item, i) => (
              <Row key={i} data={item} />
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}
export default App;