pass object to setState fails - reactjs

Question

I created my own web-app of posts where you able to add,delete and update posts. Right now when I try to add a post and pass the inputs value throw a function and then execute 'setState' I get an error, something is wrong in the way I do it. could you help out?
I could just remove the root object from the state ('post') and just use the title,body as for themselfs. But I want to structure it this way: Post:{title,body}
import React, { Component } from 'react';
export class addPost extends Component {
state = {
post: {
title: '',
body: ''
}
};
handleChange = e => {
this.setState({ post[e.currentTarget.id]: e.currentTarget.value });
console.log(this.state);
};
handleSubmit = () => {};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
Enter title:
<input
type="text"
value={this.state.title}
onChange={this.handleChange}
id="title"
/>
Enter body:
<input
type="text"
value={this.state.body}
onChange={this.handleChange}
id="body"
/>
</form>
</div>
);
}
}
export default addPost;
I expect to pass this object post:{title:'sometext',body:'sometext'}

Answer 1

You need to fix on two places
Where you are setting state
Where you are accessing state in input
handleChange = e => {
this.setState(prevState => ({
post: { ...prevState.post, [e.target.id]: e.target.value }
}));
};
<input value={this.state.post.title />
<input value={this.state.post.body} />

Answer 2

Made a sandbox for you: https://codesandbox.io/s/p2w7765j0
Most conventions are to use the name property for your inputs and map them using event.target.name
import React, { Component } from "react";
class AddPost extends Component {
state = {
post: {
title: "",
body: ""
}
};
handleChange = event => {
this.setState(
{
post: {
...this.state.post,
[event.target.name]: event.target.value
}
},
() => console.log(this.state)
);
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
Enter title:
<input
type="text"
value={this.state.post.title}
onChange={this.handleChange}
name="title"
/>
Enter body:
<input
type="text"
value={this.state.post.body}
onChange={this.handleChange}
name="body"
/>
</form>
</div>
);
}
}
export default AddPost;