It depends on your app's style. If it is a simple app where component two needs to access component one's variables props would be easy to use. However, as apps scale, you need to consider situations where component two needs to access a global state. Then, things change. Suppose your ComponentOne is the parent that contains & controls the state and ComponentTwo is the child and will only use the state passed from the parent.

Component1.js

import React from 'react';
import ComponentTwo from "./yourcomponent2directory.js"

const ComponentOne = () => {

varOne = Mike;
varTwo = Tyson;

return
(
<div>
<ComponentTwo varOne={varOne} varTwo={varTwo}/>
</div>
)}

export default ComponentOne

ComponentTwo.js

import React from 'react';
import ComponentOne from '../OtherFolder/';

const ComponentTwo = (props) => {

return(
<div>
<p>{props.varOne}, {props.varTwo}</p>
</div>
)}

export default ComponentTwo

or you can destructure props like...

const ComponentTwo = ({varOne,varTwo}) => {

return(
<div>
<p>{varOne}, {varTwo}</p>
</div>
)}

export default ComponentTwo

The pattern that you have mentioned is children prop pattern, where the nested JSX gets passed to the component as the children.

When you include JS as part of JSX, you will have to wrap them in {}

<Form>
  { checkboxes.map(id => <Checkbox key={id} id={id} />) }
</Form>

Your Form component render method would look something like this.

render() {
  <div>
    {this.props.children}
  </div>
}

If the children that you passed is a function, you would just invoke it in the Form component.

<Form>
  {() => {
    return checkboxes.map(id => <Checkbox key={id} id={id} />)
  }}
</Form>

You just invoke the children cause it is passed as a function.

render() {
      <div>
        {this.props.children()}
      </div>
    }