Issue with React challenge

Tell us what’s happening:

I hope this is the right way to go about this. This isn’t so much an issue as it is a “heads up” of sorts to the fCC team. When I try to type into the <input> field that we create as part of this lesson, I get a browser error that reads as the following:

“Uncaught TypeError: Cannot read properties of null (reading ‘value’)”

However, when I attempt to submit my code I get the success checkmark and it allows me to move onto the next lesson. It feels like there is a bug here?

I don’t see anything I’ve done wrong with the code itself, though am of course eager to find out if I’m missing something!

Any and all help will be greatly appreciated :slight_smile:

  • TR

    **Your code so far**
class ControlledInput extends React.Component {
constructor(props) {
  this.state = {
    input: ''
  // Change code below this line
  this.handleChange = this.handleChange.bind(this);
  // Change code above this line
// Change code below this line
handleChange(event) {
  this.setState(state => ({
// Change code above this line
render() {
  return (
      { /* Change code below this line */}
      <input value={this.state.input} onChange={this.handleChange}/>
      { /* Change code above this line */}
      <h4>Controlled Input:</h4>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36

Challenge: Create a Controlled Input

Link to the challenge:

In React 16 will be null inside a setState updater function.

I updated the hint thread with some information because we have gotten this question enough times that I think it is warranted.

I’m guessing the test doesn’t cause this error to be thrown because of how it is being mocked.


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.