Is there a way to pass data to props.children in a functional component

Question

I am working a project and want to be able to send data from a component to its props.children component. I think this is done using render props in class components but I don't know how to implement it in a functional one. Here is an extremely simplified version of something I am trying to accomplish. I want to render different things in the Child component depending on what "edit" is set to in Parent.

function Parent({ children }) {
  const [edit, setEdit] = useState(false);
  return (
      <div>
        {"blah blah blah..."}
        <button onClick={()=>{setEdit(!edit)}}>Click</button>
      {children}
      </div>
  );
}

function Child() {
  if (edit === true) {
    return (
      <Parent>
        {"Edit is True"}
      </Parent>
    );
  }

  return (
    <Parent>
      {"Edit is False"}
    </Parent>
  );
}

Answer 1

You have to generate children components by cloning elements manually.

How to pass props to {this.props.children}

Answer 2

Is this what you need? You can share states to children

const Parent = () => {
 const [edit, setEdit] = useState(true);
  return (
    <>
      <div>Hello</div>
      <Child edit={edit} />
    </>
  );
};

const Child = params => {
  return params.edit? (
    <div>Do something if true</div>
  ):
  (
    <div>Do something if false</div>
  )
};