/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 vote159 views1 answer
Bottom navigation bar react native hide on keyboard
Javascript React
0 vote287 views1 answer
Canvas js in react
Javascript React
18 votes149 views1 answer
Get specific characters from state variable reactjs
Javascript React
16 votes166 views3 answers
Start react native
Javascript React
0 vote198 views1 answer
Create react expo
Javascript React
0 vote157 views1 answer
Package path ./react is not exported from package next-auth
Javascript React
0 vote156 views1 answer
Remove react native cli mac
Javascript React
0 vote145 views1 answer
Add event listener react hooks
Javascript React
0 vote174 views1 answer
React steam auth
Javascript React
10 votes160 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React