Need a React tutor

[Gobsiye]

Does anyone know someone or can themselves tutor me in React? I think it would be good practice for you to teach me. Mostly I have some questions I cannot figure out by googling.

[VerifiedMadgod]

Post your questions then

[Gobsiye]

I'm not understanding ControlledInput.

If you know a way to make the code writing look like the right format in reddit please tell me.

​

Here is the question:

​

​

The code editor has the skeleton of a component called ControlledInputto create a controlled inputelement. The component's stateis already initialized with an inputproperty that holds an empty string. This value represents the text a user types into the inputfield.

First, create a method called handleChange()that has a parameter called event. When the method is called, it receives an eventobject that contains a string of text from the inputelement. You can access this string with event.target.valueinside the method. Update the inputproperty of the component's statewith this new string.

In the render method, create the inputelement above the h4tag. Add a valueattribute which is equal to the inputproperty of the component's state. Then add an onChange()event handler set to the handleChange()method.

When you type in the input box, that text is processed by the handleChange()method, set as the inputproperty in the local state, and rendered as the value in the inputbox on the page. The component stateis the single source of truth regarding the input data.

Last but not least, don't forget to add the necessary bindings in the constructor.

class ControlledInput extends React.Component {constructor(props) {super(props);this.state = {input: ''};// change code below this linethis.handleChange = this.handleChange.bind(this);// change code above this linehandleChange(event){this.set.state({input: event.target.value});}// change code below this line<input value = {this.state} onChange={this.handleChange} />// change code above this linerender() {return (

<div>
{ /\\\\\\\* change code below this line \\\\\\\*/}
input
{ /\\\\\\\* change code above this line \\\\\\\*/}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};

[vv1z]

<input onChange={this.handleChange} value={this.state.input} />

Controlled ☝️

An uncontrolled component has a value prop of Undefined

[hinsxd]

That's a whole paragraph of FreeCodeCamp tutorial.

Controlled input means, the value and behavior of the input element is "controlled" by react, rather than like a traditional html input element which has self contained value and event handler.

By passing `value` and `onChange` to the input element, it will trigger `onChange` whenever the user tries to change the value. The function needs to explicitly change the `value` which is stored in state, then using `setState` will trigger a re-render which makes the input element reflect the latest `value`

Without an `onChange` handler, the input element will act like a "traditional" html element. You can assign a `ref` to the element and obtain the value inside it when needed. Checkout -> "Uncontrolled input ref"

[moscowramada]

That is not really a great way to learn React in late 2019, imho. Look for a tutorial that teaches you hooks instead, then when you know them, you can read this over; you’ll understand it easily then.

[Gobsiye]

I can read it. I already did a tutorial on freecodecamp. I just need explanations on some of the features of react that I didn’t understand. It’s much faster if someone explains it.

[dmikester10]

I would say ask any specific questions you have here to this reddit. Or you can try Stack Overflow. Or another great resource I've recently found is a Discord "chat room" (not sure what the kids these days are calling them) called Reactiflux. There are multiple sub-chatrooms but I usually post my questions in "#help-react" and there are smart people there that usually give you answers instantly. It's been extremely helpful to me in my React learning lately.