/Javascript/React/How to pass a component as a prop in react

How to pass a component as a prop in react

Pass props in react

/* PASSING THE PROPS to the 'Greeting' component */
const expression = 'Happy';
<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component

/* USING THE PROPS in the child component */
class Greeting extends Component {
  render() {
    return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
  }
}

How to pass a component as a prop in react

const Parent = () => { 
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {componentToPassDown}  
    </>
  )
}

Source: stackoverflow.com

Similar codes

0 vote319 views2 answers
Login with facebook expo react native
Javascript React
3 votes357 views1 answer
React export
Javascript React
0 vote374 views3 answers
SyntaxError: /mnt/c/myAppFile/hello-rails-react/app/javascript/components/Greeting.js: Support for the experimental syntax 'jsx' isn't currently enabled rails
Javascript React
0 vote335 views1 answer
Storybook react router
Javascript React
0 vote381 views1 answer
ScrollspyNav react
Javascript React
4 votes308 views3 answers
Sleep in react
Javascript React
0 vote308 views1 answer
How react work
Javascript React
1 vote332 views1 answer
Unexpected token react native stack navigation
Javascript React
16 votes334 views1 answer
React native 0.60.4 xiaomi crashes at open
Javascript React
-1 vote306 views5 answers
Play audio in react
Javascript React