In react while using function ,it's property not showing on screen

Question

I am learning React-JSX and I have tried a code

function sayHello(){
  return <h1>Haiiiiii</h1>
}
class App extends Component {
  render() {
    return (
      <div>
      <sayHello> Haiiiiii </sayHello>
      </div>
    );
  }
}

Haiiiiii is rendering to screen but the <h1> heading format is not showing on screen.(ie.,Haiiiiii is not showing in bold font )

I want to display it as what an
tag is supposed to display a text — Jane Fred, Aug 17 '18 at 11:50
Make the component name as `SayHello` (capital S), also all the children will be passed in props so write it like this: `function SayHello(props){ return (
Haiiiiii {props.children}
) }` — Mayank Shukla, Aug 17 '18 at 11:52

Hemadri Dasari · Answer 1 · 2018-08-17T11:56:27.357

0

This is one way of doing

function sayHello(props){
  return <b>{props.text}</b>
}
class App extends Component {
  render() {
    return (
      <div>
      <sayHello text="Haiiiiiiii" />
      </div>
    );
  }
}

edited Aug 17 '18 at 11:56

answered Aug 17 '18 at 11:49

Hemadri Dasari

29,321
31
106
146

In react while using function ,it's property not showing on screen

tag is supposed to display a text

Haiiiiii {props.children}

1 Answers1