How to pass class props to function in reactjs

Question

I am attempting to pull the value of Number from the props set in the Button class. And then render this value in the discover function. The class is correctly displaying the value of Number. However, the function is not displaying any value for Number.

I have been messing around with this for a while to get it to work. But I cannot find any solutions to my problem.


class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Number: "55"
    };
  }
  render() {
    return (
      <div>
        <p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
      </div>
    );
  }
};

const discover = (props) => {
  return (
    <div>
      <Button />
      <p>Number: {props.Number}</p> //The value of Number is not displayed
    </div>
  );
};

export default discover;

There are no error messages. Expected result shown: https://i.stack.imgur.com/lXmSo.png

Actual result shown: https://i.stack.imgur.com/nOc4x.png

sounds like `discover` needs to store the state, and pass the number to your button. — John Ruddell, Aug 29 '19 at 17:36

score 0 · Answer 1 · answered Aug 29 '19 at 16:56

Your discover is a functional component and you are not passing anything to your component and in your button component, you are setting state that is the reason behind your output. try this.

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Number: "55"
    };
  }
  render() {
    return (
      <div>
        <p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
        <discover {...this.state} /> 
      </div>
    );
  }
};

const discover = (props) => {
  return (
    <div>
      <p>Number: {props.Number}</p> //The value of Number is not displayed
    </div>
  );
};

export default Button;

now you will get your desire output

score 0 · Answer 2 · answered Aug 29 '19 at 16:58

I'm not sure where you are calling the Discover component, but you would need to pass the number down as a prop to the Discover component in order to get it to render.

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Number: "55"
    };
  }
  render() {
    return (
      <div>
        <p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
        <Discover Number={this.state.Number}/> // we are passing Number as a prop to the Discover component
      </div>
    );
  }
};

const Discover = (props) => {
  return (
    <div>
      <Button />
      <p>Number: {props.Number}</p> //The value of Number is not displayed
    </div>
  );
};

export default Discover;

I'd also capitalize your custom react components like Discover.

Why do components in react need to be capitalized?

discover renders button, which renders discover, which renders button. — John Ruddell, Aug 29 '19 at 17:35
You are right, you wouldn't want a recursive structure like that. But the point about how to pass down props still holds. — Michael Gingras, Aug 29 '19 at 18:24

score 0 · Accepted Answer · answered Aug 29 '19 at 17:40

You want to keep discover and button in sync with eachother, but currently there isn't anything doing that. button is a child of discover with a local state. Instead of this make the parent have the state and it can then pass that down to the button component.

class Discover extends Component {
  state = { number: 55 }
  render() {
    const { number } = this.state
    return (
      <div>
        <Button number={number} />
        <p>Number: {number}</p>
      </div>
    );
  }
};

const Button = ({number) => {
    return (
      <div>
        <p>Number: {number}</p>
      </div>
    );
  }
};

export default Discover;

Here's a live example for you to play with

How to pass class props to function in reactjs

3 Answers3