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.imgur.com/fr61SE0.png

Actual result shown: https://i.imgur.com/MRE0Lsj.png

Answer 1

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

Answer 2

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?

Answer 3

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