title: How to create an edit button in React?
body: <p>I am fairly new to React so any help would be appreciated!</p>
  
  <p>What I am trying to do is create an edit button for my code that allows the user to edit the persons birth year, and their home world. I want the text to appear as a text box when the edit button is pressed, so that the user can change it, and then save it somehow. Here is my code:</p>
  
  <pre><code>class Card extends Component {
  
      render() {
        const {imgSrc, cardName, birthYear, onEdit} = this.props;
        return (
          &lt;div className='card'&gt;
            &lt;div className='card-content'&gt;
              &lt;div className='card-name'&gt;{cardName}&lt;/div&gt;
                  &lt;img src={`http://localhost:3008/${imgSrc}`} alt='profile'/&gt;
                &lt;p&gt;
                    &lt;span&gt;Birthday:&lt;/span&gt;
                    &lt;span className='birth-year'&gt;{birthYear}&lt;/span&gt;
                &lt;/p&gt;
                &lt;p&gt;
  
                    &lt;span&gt;Homeworld:&lt;/span&gt;
                    &lt;span className='home-world'&gt;Earth&lt;/span&gt;
                    &lt;/p&gt;
                  &lt;div align='center'&gt;
                  &lt;button&gt;Edit&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  </code></pre>