title: How to pre populate form in react js | not able to pre fill up the field in react js for edit?
body: <p>1) I'm about to edit the field so that I can see what I wrote previously and edit them, 
     I know there are some <a href="https://stackoverflow.com/questions/39515960/react-pre-populate-form">answers</a> similar answers but I'm not able to figure out what is 
  happening in my project. </p>
  
  <p>My <strong>EditCategory.js</strong> looks like </p>
  
  <pre><code> import React, { Component } from 'react'
      import axios from 'axios'
      export default class EditCategory extends Component {
        state = {
              name : "",
         }
  
         componentDidMount() {
          //console.log(' cdm working ? ', this.props.match.params._id) //YES
          this.props.getSingleCategory(this.props.match.params._id);
      }
        onInputChange = (e) =&gt; {
        this.setState({name: e.target.value }) //looks for name
      }
  
      onFormSubmit = (e) =&gt; {
          e.preventDefault();
          const category = {
            _id : this.props.match.params._id,
            name : this.state.name
          }
  
      axios.put(`http://localhost:5000/api/genres/${category._id}`, category)
       .catch( error =&gt; console.log("error occured ")) //set error to the state var and ...
       window.location = "/categories"
      }
  
      render() {
  
        const { category, isLoading } = this.props;
        if(isLoading || !category ) {
            return &lt;h3&gt;Category is not loaded properly.&lt;/h3&gt;
        }
          return (
          &lt;div className="container"&gt;
              &lt;h2&gt;Update CATEGORY &lt;/h2&gt;
              &lt;form onSubmit = { this.onFormSubmit }&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="name"&gt;Category Name:&lt;/label&gt;
                    &lt;input type="text" required className="form-control" id="name" 
                    onChange={this.onInputChange}
                    //value={this.state.name }
                    value={category.name}
                    /&gt;
                &lt;/div&gt;  
                &lt;button type="submit" className="btn btn-primary"&gt;Update Category&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;  
       )
      }}
  </code></pre>
  
  <p>and my <strong>App.js</strong> is 
       import ....</p>
  
  <pre><code>state = {
           books : [],
           categories : [],
  
           book : {},
           category : {}, //consider this
  
           isLoading : false,
    }
  
  
  
  //only id is unique
   getSingleCategory = async (categoryId) =&gt; {
        //console.log("app.js book id " , bookId) 
        this.setState({isLoading : true})
        const res = await axios.get(`http://localhost:5000/api/genres/${categoryId}`)
          //console.log(res.data)
        this.setState({ category : res.data, isLoading : false})
     }
     .
     .
     .
  
  &lt;Route
        exact path={ "/cateogories/:_id/" }
       render={ (props) =&gt; (
        &lt;EditCategory {...props } 
       category={category}
        loadiing = {isLoading}
       getSingleCategory ={this.getSingleCategory}
        /&gt;
       )      
     }
   /&gt;
  </code></pre>
  
  <p>When I click on the link that is defined correctly, and update the field it works but fields are empty 
   when loaded, but updates the selected item correctly.</p>
  
  <p>what should I write in value={what goes here ? } so that it pre populates the data. </p>