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 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
- How to render list of mongo objects in React component - How to render list of mongo objects in Reactjs
- How to place custom route links in Reactjs component - How to place custom links to routes/page in Reactjs
- How to fix mongo object Type error in Reactjs - How to fix TypeError/undefined in React - MERN application
- How to create multi page app with Reactjs - How to create a multi routed app with Reactjs app
- How to make GET API request in Reactjs - How to make GET API call in Reactjs
- How to make POST API request in Reactjs - How to make POST API call in Reactjs
- Create a login Form component in Reactjs - How to create a login form component using refs,props and CSS in Reactjs
