starWars.js

import React from 'react';
import axios from 'axios';
import './App.css';

const SWAPI_URL = 'https://swapi.co/api';

const FilmSelector = ({ options, onChange }) => (
  <select onChange={onChange}>
    <option value="">Select</option>
    {
      options.map(option => (
        <option key={option.episode_id} value={option.title}>{option.title}</option>
      ))
    }
  </select>
)

const FilmTable = ({ films, onDelete }) => (
  <table>
    <thead>
      <tr>
        <th>id</th>
        <th>title</th>
        <th>release</th>
      </tr>  
    </thead>
    <tbody>
      {films.map(film => (
        <tr key={film.episode_id}>
          <td>{film.episode_id}</td>
          <td>{film.title}</td>
          <td>{film.release_date}</td>
          <td><button onClick={() => onDelete(film.title)}>X</button></td>
        </tr>
      ))}
    </tbody>
  </table>
)

class App extends React.Component {
  state = {
    films: [],
    selectedFilms: [],
    unselectedFilms: []
  }
  componentDidMount() {
    axios.get(`${SWAPI_URL}/films/`)
      .then(data => {
        if (data) {
          const films = data.data.results;

          this.setState({
            films,
            unselectedFilms: films
          })
        }
      })
  }

  onValueSelect = (event) => {
    const titleSelected = event.target.value
    const filmSelected = this.state.films.find((film) => film.title === titleSelected)
    const filteredUnselected = this.state.unselectedFilms.filter(film => film.title !== titleSelected)

    this.setState(prevState => ({
      selectedFilms: [
        ...prevState.selectedFilms,
        filmSelected
      ],
      unselectedFilms: filteredUnselected
    }))
  }

  onDelete = (titleSelected) => {
    const filmSelected = this.state.films.find((film) => film.title === titleSelected)
    const filteredSelected = this.state.selectedFilms.filter(film => film.title !== titleSelected)

    this.setState(prevState => ({
      unselectedFilms: [
        ...prevState.unselectedFilms,
        filmSelected
      ],
      selectedFilms: filteredSelected
    }))
  }

  render() {
    return (
      <div style={{padding: '10px'}}>
        <FilmSelector options={this.state.unselectedFilms} onChange={this.onValueSelect} />
        <FilmTable films={this.state.selectedFilms} onDelete={this.onDelete} />
      </div>
    )
  }
}

export default App;