score:1

import React, { Component } from 'react';
import './App.css';
class App extends Component {
    state = {
        title: "",
        rating: "",
        price: "",
        games: [{ title: "Mario Kart", rating: 7.4, price: "$45" }]
    };

    handleSubmitButton = (e) => {

        e.preventDefault();
        const { title, rating, price } = this.state;
        this.setState(prevState => ({
            games: [...prevState.games, { title, rating, price }]
        }));
    }

    handleChange = (evt) => {
        console.log(evt.target)
        this.setState({ [evt.target.name]: evt.target.value });
    }

    render() {
        const { title, rating, price } = this.state
        return (
            <div>
                <form onSubmit={this.handleSubmitButton}>
                    <label>
                        Game Name
                      <input
                            type="text"
                            id="name-input"
                            name="title"
                            value={title}
                            onChange={(evt) => this.handleChange(evt)}
                        />
                    </label>
                    <label>
                        Rating
                    <input

                            type="text"
                            id="ratings-input"
                            name="rating"
                            value={rating}
                            onChange={(evt) => this.handleChange(evt)}
                        />
                    </label>
                    <label>
                        Price
                    <input
                            type="text"
                            id="price-input"
                            name="price"
                            value={price}
                            onChange={(evt) => this.handleChange(evt)}
                        />
                    </label>
                    <button type="submit" id="submit-button">Submit</button>
                </form>
                <label>
                    Search
                <input type="text"
                        id="search-input" />
                </label>
                <table id="directory-table">
                    <tbody>
                        <tr>
                            <th>Name</th>
                            <th>Ratings</th>
                            <th>Duration</th>
                        </tr>

                        {this.state.games.map((game,index) => {
                            return (
                                <tr key={index}>
                                    <th>{game.title}</th>
                                    <th>{game.rating}</th>
                                    <th>{game.price}</th>
                                </tr>
                            )

                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}

export default App;

Related Query

More Query from same tag