title: How to edit a React component and change the text displayed on screen
body: <p>I have one <strong>Add/delete/edit</strong> component and a movie component. I want to edit a movie component inside Add, and then I want to display the new data in the place where old data displayed.</p>
  <p>Here is my <strong>Add/edit/delete</strong> component:</p>
  <pre><code>import React, {Component} from 'react';
  import Movie from './Movie.jsx';
  
  
  class AddComponent extends Component {
      constructor(props){
          super(props);
          this.state = {
              movieText: '',
              movies: [],
          };
      }
  
  updateMovieText(movieText){
      this.setState({movieText: movieText.target.value})
  }
  
  addMovie(){
      if(this.state.movieText === ''){return}
  
      let moviesArr = this.state.movies;
      moviesArr.push(this.state.movieText);
      this.setState({movieText: ''})
      this.textInput.focus();
  }
  
  handleKeyPress = (event) =&gt; {//enables to add when pressing enter on keyboard
      if(event.key === 'Enter'){
      let moviesArr = this.state.movies;
      moviesArr.push(this.state.movieText);
      this.setState({movieText: ''})
      }
  }
  
  deleteMovie(index) {
      const movies = this.state.movies;
      const newMovies = [
          ...movies.slice(0, index),
          ...movies.slice(index + 1)
      ];
      this.setState({
          movies: newMovies
      });
      // Notice movies !== new Movies
      // and movies still contains all the previous values
  }
  
  
  editMovie(index,value){
      const movies = this.state.movies;
      const newMovies = movies.map((movie, i) =&gt; {//HERE is EDIT
          if (i !== index) {
              return movie;
          }
          return value;
      });
      this.setState({ movies: newMovies });
      // Notice movies !== new Movies
      // and movies still contains the previous values
  }
  
      render(){
          let movie = this.state.movies.map((val,key)=&gt; {//prints on screen list of movies see line55
              return (&lt;Movie 
              key={key} 
              text={val} 
              deleteMethod={() =&gt; this.deleteMovie(key)}
              editMethod={this.editMovie.bind(this, key)}
               /&gt;
  
              );
  
          });
  
          return (
              &lt;div&gt;
                  &lt;input type=&quot;text&quot;
                      ref={((input)=&gt;{this.textInput = input;})}
                      className=&quot;textInput&quot;
                      value={this.state.movieText}
                      onChange={movieText =&gt; this.updateMovieText(movieText)}
                      onKeyPress={this.handleKeyPress.bind(this)}
                      /&gt;
                  &lt;button onClick={this.addMovie.bind(this)}&gt;Add&lt;/button&gt;
                  {movie}
  
                  &lt;/div&gt;
  
          );
      }
  }
  
  export default AddComponent;
  </code></pre>
  <p>And this is my <strong>Movie</strong> component:</p>
  <pre><code>import React, {Component} from 'react';
  
  
  class Movie extends Component{
      constructor(props){
          super(props);
          this.state= {
              inputValue: ''
          };
      }
      updateInputValue(evt) {
          this.setState({
              inputValue: evt.target.value
          });
      }
  
      render(){
          return(
              &lt;div&gt;
                  {this.props.text}
                  &lt;button onClick={this.props.deleteMethod}&gt;X&lt;/button&gt;
                  &lt;input value={this.props.newMovieName} 
                      onChange={evt =&gt; this.updateInputValue(evt)}
                  /&gt; 
                  &lt;button onClick={() =&gt; this.props.editMethod(this.inputValue)}&gt;edit&lt;/button&gt;
                  
                  
              &lt;/div&gt;
          );
      }
  }
  
  export default Movie;
  </code></pre>
  <p>With the code from above <code>this.props.text</code> disappears, leaving only the delete button, the edit text input and the edit button. If I <code>console.log</code> the value returned from edit function prints <code>undefined</code></p>