<div id="root"></div>
div {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}
input,
textarea {
box-sizing: border-box;
width: 200px;
margin: 0 10px;
}
View Compiled
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "",
description: ""
};
}
handleChange = (e) => {
const target = e.target;
this.setState({ [target.name]: target.value });
};
handleSubmit = (e) => {
e.preventDefault();
alert(`Entered values: ${JSON.stringify(this.state)}`);
};
render() {
return (
<form onSubmit={this.handleSubmit} autocomplete="off">
<div>
<label for="title">Title:</label>
<input
name="title"
type="text"
value={this.state.title}
onChange={this.handleChange}
/>
</div>
<div>
<label for="description">Description:</label>
<textarea
name="description"
value={this.state.description}
onChange={this.handleChange}
/>
</div>
<button>Submit</button>
</form>
);
}
}
ReactDOM.render(<Form />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.