Reactjs – Type of Props

3- Type of Props :

1.State Variables
2.Functions
3.Components

Parent child component Example

1.index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2.app.js

import logo from './logo.svg';
import './App.css';
import Parent from './Parent';

function App() {
  return (
    <div className="App">
      <Parent/>
    </div>
  );
}

export default App;

3. parent.js

import React,{useState} from 'react'
import Child from './Child';
import Passcomponent from './Passcomponent';

export default function Parent() {

 const [name,setName] = useState('React')

 const changeName = () => {
    setName('React JS')
 }

  return (
    <Passcomponent>
        <Child title={name} onclick = {changeName}/>
    </Passcomponent>
  )
}

4.child.js

import React from 'react'

export default function Child({title,onclick}) {


  return (
    <>
    <h1>{title}</h1>
    <button onClick={onclick}>Change Name</button>
    </>
  )
}

5.Passcomponent.js

import React from 'react'

export default function Passcomponent({children}) {
  return (
    <>
        {children}
    </>
  )
}