title: Editable textbox in react js
body: <pre><code>class myInfo extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        name: sessionStorage.getItem('name'),
      };
  
    }
  
    componentDidMount() {
      axios.post('http://localhost:8080/allProfiles', {
        "name": this.state.name
      })
        .then((response) =&gt; {
          document.getElementById("email").innerHTML = "email: " + response.data.email;
        })
        .catch(function (error) {
          console.log(error);
  
        });
    }
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;p id="email"&gt;&lt;/p&gt;
        &lt;/div&gt;
  
      );
    }
  }
  </code></pre>
  
  <p>Noob practising react here. Given the name  my rest api would just return a json will all of its profile stuff like</p>
  
  <pre><code>{
      "email": ...
      "description: ...
  }
  </code></pre>
  
  <p>For simplicity it will just get the email for now. The output of this page at the moment is</p>
  
  <pre><code>email: userFromThisSession@gmail.com
  </code></pre>
  
  <p>All in text. My goal is </p>
  
  <p><a href="https://i.stack.imgur.com/PQ0HK.png" rel="nofollow noreferrer">image</a></p>
  
  <p>Without the fancy css^^</p>
  
  <p>So its the username for above image but same concept for email. I want </p>
  
  <pre><code>email: a textbox (has the email from above) (and then a button to edit it)
  </code></pre>
  
  <p>Anyone know how? I've been searching for a while but no luck</p>