How To Create an Editable Text Field in Table Using ReactJS

import React, {Component} from 'react';

export class AppComponent extends Component {
    state = {
        movieDetails: [
            {
                "id": 9001,
                "name": "Dead Pool",
                "rating": 8.0
            },
            {
                "id": 9002,
                "name": "The Emoji Movie",
                "rating": 1.5
            },
            {
                "id": 9003,
                "name": "Dunkirk",
                "rating": 8.5
            }
        ],
        currentValue: "",
        edit: null,
        errorMessage: "",
        successMessage: "",
        buttonActive: false
    };


    updateRating = (movie, index) => {
        const confirmation = window.confirm("Do you want to update rating: " + this.state.currentValue);
        if (confirmation) {
            this.setState(state => {
                const movies = [...state.movieDetails];
                movies[index] = {...movies[index], rating: state.currentValue};
                return {movieDetails: movies};
            });
        }
    };

    handleChange = (event, movie) => {
        movie.rating = event.target.value;
        // this.setState({})
        console.log(movie, event.target.value);
    };

    getMovieDetails = () => {

        return this.state.movieDetails.map((movie, index) => {
            return (
                <tr key={movie.id}>
                    <td>{movie.id}</td>
                    <td>{movie.name}</td>
                    <td>
                        <input
                            type="text" name={"rating" + (index + 1)}
                            onFocus={() => this.setState({edit: index, currentValue: movie.rating})}
                            onBlur={() => this.setState({edit: null})}
                            value={this.state.edit === index ? this.state.currentValue : movie.rating}
                            onChange={(e) => this.setState({currentValue: e.target.value})}/>
                    </td>
                    <td>
                        <button onClick={() => this.updateRating(movie, index)}>
                            Update
                        </button>
                    </td>
                </tr>
            )
        })
    };

    render() {
        return (
            <div className="row ">
                <div className="col-md-6 offset-md-3 ">
                    <br></br>
                    <h1 className="text-center">Update Rating</h1>
                    <table id="movies">
                        <thead>
                        <tr>
                            <th>Movie Id</th>
                            <th>Movie Name</th>
                            <th>Rating</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.getMovieDetails()}
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}