/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

5 votes301 views1 answer
React native break line text if too big
Javascript React
157 votes430 views6 answers
Create new react app
Javascript React
1 vote315 views1 answer
Dynamic forms in react
Javascript React
0 vote265 views1 answer
How to insalk react router with npm
Javascript React
0 vote286 views1 answer
React 10 to 1 with step -2 (odd numbers between [1..10] inverted order)
Javascript React
2 votes286 views1 answer
React state object key value
Javascript React
23 votes338 views3 answers
React save to local storage
Javascript React
0 vote290 views1 answer
React strap documentation
Javascript React
0 vote292 views1 answer
Bootstrap modal disable close on click outside react bootstrap
Javascript React
3 votes298 views1 answer
Pass element from child to parent react
Javascript React