Render the form input binding from external function in react

Question

I am trying to bind the input from the function, as per the below code

    class ProfessionalLearningAction extends Component {
        constructor(props) {
            super(props);

            this.handleChange = this.handleChange.bind(this);
            this.ensureDataFetched();
          }

     handleChange(e) {
        let change = {}
        change[e.target.name] = e.target.value
        this.setState(change)
      }

render() {
    return (
      <div className="container">
        <h1>Edit/Add Professional Learning</h1>
        <p>This component demonstrates Add/Edit data from the server and working with URL parameters.</p>
        <br /><br />
        {renderProfessionalLearningTable(this.props)}
      </div>
    );
  }

    }

function renderProfessionalLearningTable(props) {
  return (
    <form className="container">
      <div className="form-row">
        <div className="form-group col-sm-6">
          <label>Course Name *</label>
          <input type="text" className="form-control" value={props.professionalLearnings.courseName || ''} onChange={ props.handleChange } 
            aria-describedby="Course Name" placeholder="Enter a course name" />
        </div>
      </div >
    </form >
  );
}

Keep getting the error

Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Since I know from the error message that I need to define handlechange event. I tried the below code

<input type="text" className="form-control" value={props.professionalLearnings.courseName || ''} onChange={this.handleChange} 
            aria-describedby="Course Name" placeholder="Enter a course name" />

Since I know it is a function call which is external to the class. How can I fix this error?

i think you need to connect your value with the state, otherwise it won't be updated. so instead of 'props.professionalLearnings.courseName' use the state you set — rebecca, Jul 16 '19 at 07:44
Can you please show me the example I, haven't set any state. I am new to the react — San Jaisy, Jul 16 '19 at 07:55

score 0 · Answer 1 · answered Jul 16 '19 at 07:53

Its because you don't pass onchange props. And make sure whenever you made a component it should start with Capital Name(ReactJS component names must begin with capital letters?).

class ProfessionalLearningAction extends Component {
        constructor(props) {
            super(props);

            this.handleChange = this.handleChange.bind(this);
            this.ensureDataFetched();
          }

     handleChange(e) {
        let change = {}
        change[e.target.name] = e.target.value
        this.setState(change)
      }

render() {
    return (
      <div className="container">
        <h1>Edit/Add Professional Learning</h1>
        <p>This component demonstrates Add/Edit data from the server and working with URL parameters.</p>
        <br /><br />
       <RenderProfessionalLearningTable {...this.props} handleChange={this.handleChange}/> //Pass the handlechange component
      </div>
    );
  }

    }

function RenderProfessionalLearningTable(props) {
  return (
    <form className="container">
      <div className="form-row">
        <div className="form-group col-sm-6">
          <label>Course Name *</label>
          <input type="text" className="form-control" value={props.professionalLearnings.courseName || ''} onChange={ props.handleChange } 
            aria-describedby="Course Name" placeholder="Enter a course name" />
        </div>
      </div >
    </form >
  );
}

Render the form input binding from external function in react

1 Answers1