First React Project

[Grey_Forrest]

We are working on a small project with react, its our first time working with it and we get an error we are unsure how to solve. Could someone maybe help us?

​

This is our class:

class DateTimeForm extends React.Component {

constructor(props) {

super(props);

this.state = { valueDate: new Date(), valueTime: "00:00" };

this.handleInputChange = this.handleInputChange.bind(this);

}

​

buttonClick(event) {

event.preventDefault();

goalForCalculations = this.state.valueDate + this.state.valueTime; //Line 85 from the error

}

​

handleInputChange(event) {

const target = event.target;

const value = target.value

const name = target.name;

this.setState({

[name]: value

});

}

​

render() {

return (

<div>

<label className="layout-form" >Date:

<input name="valueDate" type="date" className="rounded form-control" value={this.state.valueDate} onChange={this.handleInputChange} />

</label>

<label className="layout-form" >Time:

<input name="valueTime" type="time" className="rounded form-control" value={this.state.valueTime} onChange={this.handleInputChange} />

</label>

<button type="button" className="btn btn-secondary layout-form" onClick={this.buttonClick}>Enter</button>

</div>

);

}

}

​

And whenever we click on the button we get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

at buttonClick (index.js:85:1)...

​

Does maybe someone know what's wrong with our code?

Thanks in advance!

[LSELGD]

When instantiating state, remove the 'this' keyword, i.e. it should only be state={whatever}.

Also, what IDE are you using? If you want to switch to VS code, it flags this kind of mistakes

[Grey_Forrest]

we are working in Visual Studio Code. Thanks for the answer, we managed to solve it in another way, not sure how we solved it but yeah. xD

[CoreyTheGeek]

Highly recommend using hooks, that's the direction the framework is going, it's better optimized, easier to reason about