My effort is not good enough, I need help. Can someone assist me

JavaScript
1

Tell us what’s happening:

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // change code below this line
<input value = {this.state.input} />
// change code above this line
}
// change code below this line
handleChange(event) {
this.setState({
input: event.target.value
});
}
// change code above this line
render() {
  return (
    <div>
      { /* change code below this line */}
<button onChange="text">Input Box</button>
      { /* change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 4.4.2; TECNO-A7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.116 Mobile Safari/537.36 EdgA/45.08.2.5072.

Challenge: Create a Controlled Input

Link to the challenge:

2

First thing: syntax for classes:

class Example {
  // optionally, class properties, which are
  // written `property = value`
  exampleProperty = "example"

  // optionally, a constructor (the function
  // that creates the object)
  constructor () {
    // Do something
  }

  // optionally, class methods:
  exampleMethod1 () {
    return this.exampleProperty;
  }

  exampleMethod2 () {
    // Do something
  }
}

Notice that you can’t just out random code outside of class properties, the constructor, or a method.

In your case, there is also a program that runs on the code before the end result gets produced to allow you to write some parts of your code in JSX. JSX is a syntax that looks like HTML when you write it but gets converted to JavaScript before the end result is produced.

It has to be used in the render method though, you can’t just put the JSX in random places and expect it to work.

Second thing: event handlers.

JS event handlers (onClick, onChange etc) take a function as an argument. When the event happens, the function is ran.

You can’t just use a string instead of a function – you’re currently saying ‘when the value of the button changes, run “text”’, which doesn’t make much sense. Also onChange is the wrong event to use for a button.

3

Thanks for the light you have thrown as a solution. But my plea is that you’re too high, come down a little more, so that I can follow your foot :footprints: steps. Thanks once more for your time.

4

Still struggling to solve the challenge!

5

Tell us what’s happening:

Your code so far


class ControlledInput extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     input: ''
   };
   // change code below this line
<input value = {this.state.input}/>
   // change code above this line
 }
 // change code below this line
handleChange(event) {
 this.setState({
   input: event.target.value
 })
}
 // change code above this line
 render() {
   return (
     <div>
       { /* change code below this line */}
<p>input</p>
<h4>input</h4>
<button onChange= {this.state.input}>Change</button>        
{ /* change code above this line */}
       <h4>Controlled Input:</h4>
       <p>{this.state.input}</p>
     </div>
   );
 }
};

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10.0; S21 Plus) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.116 Mobile Safari/537.36 EdgA/45.07.2.5059.

Challenge: Create a Controlled Input

Link to the challenge: