state undefined: while sending post request from react app - reactjs

Question

I am new in react and trying to send post request to an api and getting state undefined while sending post request from react app, i this occurs because state stores data as an object. Dont know how to solve this. i would really appreciate some help.
compmonent.js
import React, { Component } from 'react'
class Register extends Component {
register () {
// alert('register')
console.warn('state', this.state)
fetch('http://localhost:8000/api/v1/accounts/registration/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state)
}).then((result) => {
result.json().then((resp) => {
console.log(resp.data.token)
localStorage.setItem('register', JSON.stringify(resp.data.token))
})
})
}
render () {
return (
<div>
<div>
<label>Email</label>
<input
type='text' placeholder='email'
onChange={(e) => { this.setState({ email: e.target.value }) }}
/><br /><br />
<label>First name</label>
<input
type='text' placeholder='first name'
onChange={(e) => { this.setState({ first_name: e.target.value }) }}
/><br /><br />
<label>Last name</label>
<input
type='text' placeholder='last name'
onChange={(e) => { this.setState({ last_name: e.target.value }) }}
/><br /><br />
<label>Password</label>
<input
type='password' placeholder='password'
onChange={(e) => { this.setState({ password1: e.target.value }) }}
/><br /><br />
<label>Confirm password</label>
<input
type='password' placeholder='confirm password'
onChange={(e) => { this.setState({ password2: e.target.value }) }}
/><br /><br />
<button onClick={() => this.register()}>Register</button>
</div>
</div>
)
}
}
export default Register
thanks

Answer 1

Your code looks ok,
I've created a runnable code snippet from your code, only time state is null and not undefined, is when you don't fill-up the form and submit,
for that you can put a condition before making fetch request.
You can run the below code snippet and check :
class App extends React.Component {
register () {
// alert('register')
console.warn('state', this.state)
if (this.state) { // <------ HERE
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
// Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state)
}).then((result) => {
result.json().then((resp) => {
console.log(resp.data.token)
localStorage.setItem('register', JSON.stringify(resp.data.token))
})
})
}
}
render () {
return (
<div>
<div>
<label>Email</label>
<input
type='text' placeholder='email'
onChange={(e) => { this.setState({ email: e.target.value }) }}
/><br /><br />
<label>First name</label>
<input
type='text' placeholder='first name'
onChange={(e) => { this.setState({ first_name: e.target.value }) }}
/><br /><br />
<label>Last name</label>
<input
type='text' placeholder='last name'
onChange={(e) => { this.setState({ last_name: e.target.value }) }}
/><br /><br />
<label>Password</label>
<input
type='password' placeholder='password'
onChange={(e) => { this.setState({ password1: e.target.value }) }}
/><br /><br />
<label>Confirm password</label>
<input
type='password' placeholder='confirm password'
onChange={(e) => { this.setState({ password2: e.target.value }) }}
/><br /><br />
<button onClick={() => this.register()}>Register</button>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>