JAVASCRIPT

pass props in compound component

//parent

const Parent = ({ children }) => {
  const [checked, setChecked] = useState(false);

  const allChildren = React.Children.map(children, (child) => {
    const clone = React.cloneElement(child, {
      checked,
      setChecked,
    });
    return clone;
  });
  return allChildren;
};

//child
const Child = ({  checked, setChecked }) => {
  return (
    <div onClick={() => setChecked(!checked)} style={{ color: "red" }}>
      child content
    </div>
  );
};

//app
<Parent>
    <Child /> 
</Parent>

how to pass props to another component

//parent component which send the prop value
const parent=(val)=>{
	return <Children value={val}/>;
}
//child component which recive the prop value
export const Children=(props)=>{
	return props.value;
}

react pass component as props

function Parent({children}) {
  return (
    <div>
      {children}
    </div>
  );
}

export default function App() {
  const Title = () => {
    return <h2>Hello world</h2>;
  };
  
  return (
    <div>
      <Parent>
        <Title />
      </Parent>
    </div>
  );
}

pass a react component as a prop from another component

[
 {...,one : ComponentOne},
 {...,two : ComponentTwo}
]

how do you pass props between components

function Greeting(props){
   return(<div>
    //using p