4.1/5 Make the attribute's value equal to the function that you passed in from Parent.js


#1

Instructions read:

Make the attribute's value equal to the function that you passed in from Parent.js. If you can't remember what prop name you used, then check Parent's render function.

I can't understand what to write in order to equal the function that I passed in from Parent.js on the previous exercise.

I've tried thinking about how the option value will change the name. I just can't figure it out. Can anyone explain?

As of right now I have:

onChange={this.changeName}

import React from 'react';

export class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hey my name is {this.props.name}!
        </h1>
        <select id="great-names" onChange={this.changeName}>
          <option value="Frarthur">
            Frarthur
          </option>

          <option value="Gromulus">
            Gromulus
          </option>

          <option value="Thinkpiece">
            Thinkpiece
          </option>
        </select>
      </div>
    );
  }
}


#2

Try to change that bit to onChange={this.props.onChange}
If I understood it right you have to pass the props name and not the value to the child. If the prop in Parent component is name onChange and value is function name, which is changeName, then to call the function from Child component you have to call like this: onChange={this.props.onChange}.

Sorry if it is still not clear. It's bit fuzzy for myself as well, but this solution worked for now. :slight_smile:


#3

Thanks for that explanation.


#4

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