Why we can use “input” to pass props for callback in React?

JavaScript
1

Tell us what’s happening:

Hi, I’m totally new to React and learning it with freecodecamp’s tutorials.

In the curriculum, I understand how Child component passing the data from inputted value but I fully don’t get why Parent component calls child component using “input” instead of “inputValue”

Since the state key kept in Perent component is “inputValue”, I thought the code where calling child component should be as below:

The code I thought it should be the answer


class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
  this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
         <GetInput
           inputValue={this.state.inputValue}
           handleChange={this.handleChange}/>
         <RenderInput
           inputValue={this.state.inputValue}/>
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.inputValue}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.inputValue}</p>
      </div>
    );
  }
};

I don’t understand where “input” in the below model answer comes from…

Model Answer by freecodecamp


class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
  this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
         <GetInput
           input={this.state.inputValue}
           handleChange={this.handleChange}/>
         <RenderInput
           input={this.state.inputValue}/>
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

I appreciate if someone could help me understand.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15.

Challenge: Pass State as Props to Child Components

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/pass-state-as-props-to-child-components

2

Hey @yuriko-pixel, these two codes are identical. Key name in props doesn’t play any role as long as you correctly reference it in the child component - it’s up to you how to name it.

3

Hi,
Thanks for the help!

By reading your reply, I remembered that stateless functional component can have own props data by defining “props.keyname” within themselves…that’s why child component here use “props.input” as their props data and pass it to parent component right?

It helped my deeper understanding of React and JS.

4

You should avoid phrases like:

Phrases like this often create unnecessary mythification.

You component is a just a function and props is just an argument to this function, that expected to be an object. Object in JS is just a box where you can put any number of key-value pairs, where key is a string and value any type.

It would be easier to understand if you rewrite your components with function notation:

const GetInput = ({ input, handleChange }) => (
  <div>
    <h3>Get Input:</h3>
    <input value={input} onChange={handleChange} />
  </div>
);

*when I write React code without typescript my brain starts panicking :laughing:

1 Like
5

Thank you for the correction

I didn’t have recognition that props in stateless component was argument but it made more sense now! Thank you very much!