如何在 Reactjs 中显示 JSX 函数的值

Question

I am quite new to jsx and while making my first Reactjs project today, I am facing this issue where I am unable to display the value of a function in the render method.

This is my parent page (Homescreen.jsx)

(I have commented on the sections where I felt that I have gone wrong)

import React, { Component } from 'react';
import Items from './Items'

class Render extends Component {
  render() { 
    return (
      <div>
        <Items number="This is the first item !" /> {/*This is where I am adding props to Items*/}

        <br>

        <Items number="This is the second item !" />
      </div>
    );
  }
}
 
export default Render;

This is the child page (Items.jsx)

import React, { Component } from 'react';

class Items extends Component {
  // This is where I attempted to get the prop
  Items = (props) => {
    return (
      <p>{props.number}</p>
    )
  }
    
  render() { 
    return ( 
      <div className="form-group">
        {this.Items}            {/*This is where I tried to display the output of "number" prop*/}
      </div>
    );
  }
}
 
export default Items;

The end result is that the "Items" function has no output and I am getting an output which is the same as the output before adding the "Items" function.

Answer 1

Just use this.props.number in render method. (you can access all props from this.props ). Try the snippet, there are two ways shown here.

 class Items extends React.Component { Items2 = (props) => { return ( <p>{props.number}</p> ) } render() { return ( <div className="form-group"> {this.props.number} {/* alternatively */} {this.Items2(this.props)} </div> ); } } class Render extends React.Component { render() { return ( <div> <Items number="This is the first item !" /> <br/> <Items number="This is the second item !" /> </div> ); } } ReactDOM.render(<Render />, document.getElementById("app"))

 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="app"></div>