React Course Notes : Section Challenge

20181002
Final Goal

  • A text area to let us change the message which is shown right below “Hello Andrew!”

So if I type in “John” and “Hey John” and hit enter.

Hint

1. Don’t need to touch GreeterMessage at all. (GreaterMessage is a simple presentational component and it’s going to work exactly the same.)

2.Obviously I need to make some changes to GreeterForm. I’m going to add a text area here as well.

3. I’ve also added little placeholders enter name and enter message. I can choose to do those using the placeholder attribute. or leave them off.

The big goal is to add the text area and give it a ref of message so I can access its value. And onFormSubmit is an form submit where most of the changes are going to happen.

  • Right now I check if the name is var. If it is,I will call a function but I am updating multiple attributes

I’d like to do is create a variable called updates just like this.

var update = {};

And every time I find a var update instead of calling a function simply set the value updates name equals to the value.

updates.name = name;

Then in the very end after I’ve validated all of attributes, I can call the update method passing in the updates object.

this.props.onNewName(updates);

  • So to kick things off, I’m going to update the GreeterForm a render method. Right now there is no text area and I want to go ahead and add that.

So to do that I’m going to open up a new tag <textarea> and specify two attributes.

First up is the <ref> which is short for reference and this is going to let me access the element later on in onFormSubmit and I’ll set the sequel to “message”.

<textarea ref="message"></textarea>

The second one is the optional placeholder action view. I’m going to set the sequel to enter message.

<textarea ref="message" placeholder="Enter message"></textarea>

And for the input I’m going to also go ahead and add a placeholder just so you know what each field does.

<input type="text" ref="name" placeholder="Enter name"/>

Now from here the render method is updated. There’s no more changes required.

The next thing I want to do it onFormSubmit is simply pull in the message value. I’m going to create a variable. Call it a message and get the value from this.refs.message.value.

var message = this.refs.message.value;

Now just like I do with name right here, I can do with message if message.length is greater than

zero. So if the message length is greater than zero I am going to assume it’s valid and I am going to clear the field using this.refs.message.value that equal to an empty string.

Lastly I am going to update updates object with a message actually view setting not equal to whatever value the user entered.

if(message.length>0){
this.refs.message.value=";
updates.message = message;
}

And at this point the onFormSubmit handler is looking pretty great. What it does is it goes ahead and builds this “updates” object and in the end it passes it up the to the Greeter component.

  • Make some changes to Greeter as well

Inside of Greeter there’s three things need to do.

Hint

  • First, getting the default message from the Props inside of handle new state.
  • Second, I should expect an update object and since the object already has all the attributes I can simply pass it as the one and only argument to set state.
  • Third, Inside of render I am currently using this.props.message. I am going to change that to use the state. So as I change the state the GreeterMessage component I renders with a new message,
  • The first thing is in getInitialState

What I want to do is set the initial message state equal to whatever prop got passed in this.props.message.

message:this.props.message

  • Next up inside of handleNewName

I am not just getting the name string anymore. I am getting an updates object so I’m going to change the argument name to updates.If I am providedI can simply pass that object right into setState.

this.setState(updates);

  • The last thing I need to do is update what I am using and render

Currently I am accessing the message prop. I want to access this.state.message. And with this in place I am good to go.

And if I head over into my terminal and fire up the server, I should be able to refresh my chrome app and you can see everything is working.

I’m going to go ahead and type John click a set name. You can see John gets replaced which is awesome.

  • One of the first things I want to do is change the handle new name function because it currently doesn’t just update the name.

What I’m going to call it instead is handleNewData that means inside of the Greeterform. I need to update it instead of passing in handle new name.
handNewData:function(updates){
this.setState(updates);{
},

GreeterForm onNewName={this.handleNewDate}/>

And I also want to change the prompt that gets accessed in GreaterForm instead of onNewName. I’m going to call it onNewData and all that means I need to do up in GreeterForm.

GreeterForm onNewData={this.handleNewData}/>

Change this.props.onNewName to this.props.onNewData.

this.props.onNewData(updates);

Now this isn’t going to change any of the functionality I saw but it just creates a clearer program. Good at naming is very important.

I am going to change the set name button because I’m no longer just sets the name. It also sets the message instead others change it to submit.

<button>Submit</button>

Lastly I’m going to add wrapping <div> tags around all three of these elements. So what I’m going to do is cut it out open up a divs and paste that in. I’m going to do the same thing for the text area.

And lastly for the submit button.

Review

1.What is React state used for?

Keeping track of data that changes in a component.

2.What is a presentational component?

A component that uses props to display information.

3.What is a container component?

A component that maintains state & renders child components.

4.What are React props used for?

Initializing a component with data.

5.How would you set a components “name” state to “John”?

this.setState({name:’John’});

6.How would you pass the “age” variable as a property to the “Person” component?

<Person age={age}/>