在课堂上反应js道具

Question

i am facing one problem with one simple code.

i am having a props in my component tags called name and age. And i want to use this inside my class Login

my code look like this way

export default class App extends Component {

//constructor(props){

//super(props); //}

render(){ return(

  <div className="person">
  <h1>{  }</h1>
  <p> Your age is 37</p>


  </div>

); } }

ReactDOM.render(<App name="john" age="37"/>, document.getElementById('root'));

i want to access the attribute of my component name and age. And render them in the above html.

Answer 1

You are passing the data to the App, but not actually using it in the JSX.

export default class App extends Component {

  constructor(props) {
    super(props);
  }

  render() { 
    const {name, age} = this.props;
    return (
      <div>
        <h1>Hello {name}</h1>
        <p> Your age is {age}</p>
      </div>

    ); 
  } 
}

ReactDOM.render(<App name="john" age="37"/>, document.getElementById('root'));