/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

4 votes200 views1 answer
React useeffect not on first render
Javascript React
0 vote199 views1 answer
Dlowlad the json fiel in react js pretty formate
Javascript React
1 vote192 views1 answer
How to call create react app
Javascript React
1 vote196 views3 answers
React redux how to change object value in reducer
Javascript React
0 vote207 views1 answer
Decet wheter react app in development or production
Javascript React
0 vote223 views1 answer
React native diasble view
Javascript React
0 vote229 views1 answer
React throttle render
Javascript React
0 vote196 views3 answers
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Javascript React
0 vote170 views1 answer
Create-react-app height issues with flex
Javascript React
1 vote206 views2 answers
What is the purpose of the super(props) method in React
Javascript React