How to interact with input in Reactjs

With Browser route we can create beautiful responsive React app on the go. Most of the dynamic applications accepts some feed back from users. How do we get this done.

This will involve the following

• Setting state for the each input element.
• Attach it to the value property of the input.
• Add a button event function and attach it to the render method.

Setting State

I have a one input text field and a button in the component.

import React, { Component } from "react"; 
 
class Comment extends Component {
  constructor(props) {
    super(props);    
    this.state = {      
    };
  }
  
  
  render() {
    return (
      <div className="form-group  m-2 p-2">
        <textarea
          placeholder="Comment here"
          class="form-control"          
          aria-describedby="inputSuccess5Status"
        />
        <button
          className="btn btn-primary m-1 p-2"        >
          Comment
        </button>         
      </div>
    );
  }
}

export default Comment;

In the above Comment component I have used bootstrap to beautify the form with one Text Area and button element. We need to create and attach a state for the Text Area in the constructor, also need to attach the new value with the state, whenever the user enter the comment. So we need to setState the comment in the on Change event handler.

• Create state
• Create event handler for on Change
• attach them to the HTML tags

class Comment extends Component {
  constructor(props) {
    super(props);
    this.onChangeComment = this.onChangeComment.bind(this);
    this.onPostComment = this.onPostComment.bind(this);
     
    this.state = {
      comment: "",
    };
  }
  onChangeComment(e) {
    this.setState({ comment: e.target.value });
  }

  onPostComment(e) {
    try {
      
     console.log('Thank for using react form')
    } catch (error) {
      console.log(error);
    }
  }
  
  render() {
    return (
      <div className="form-group  m-2 p-2">
        <textarea
          placeholder="Comment here"
          class="form-control"
          value={this.state.comment}
          onChange={this.onChangeComment}
          aria-describedby="inputSuccess5Status"
        />
        <button
          className="btn btn-primary m-1 p-2"
          onClick={this.onPostComment}
        >
          Comment
        </button>
         <CommentCard  comments={this.props.comments}/>
      </div>
    );
  }
}

In the above code , created a state comment , event handlers for input and button and bind them in the constructor.

In the on Change event update the state so, each time the user update will change the state.

Finally attach the state and handlers to form elements ( button,Text Area).

Where did can I see the log(‘…’) result ?. well ,open your browser , ctrl+shift+I ( for developer tools) then go to console and you will see the message)

Following React posts deserve good read

• How to clear all element in mongoose object array in Nodejs - How to clear elements in a mongodb object array
• Use dotenv to store configurations in Reactjs - use dotenv in Reactjs to store API base URL
• How to export multiple components in Reactjs - How to render export multiple components in React
• How to create ant row design for Reactjs - Quickly create a row design using Ant Design customize UI for React component
• Ant layout for Reactjs apps - How to create a app layout with Ant Design UI Kit in Reactjs
• How to render child components in Reactjs - How to render child components in React
• How to add element to mongoose object array in Nodejs - How to add element to a mongodb object array
• How to interact with input in Reactjs - How to handle state and event of input element in React apps
• How to render mongo object in Reactjs - How to render MongoDB object/ObjectId in React/MERN app
• How to render mongo document in Reactjs - How to render mongo document in react component