There is no need to use useState if you are going to return it anyway. You cannot return an object in a component. You have to return some JSX element like and you can have your object inside.

Assumptions made here:

• ditto, charizard are strings. if not just do JSON.stringify(ditto) to cast object as string

Landing:

export const Landing = () => {
  return (
    <>
      <h1>Landing</h1>
      <ReturnPokemon pokemon="ditto" />
    </>
  );
};

ReturnPokemon:

import { useDitto } from "../../context/ditto";
import { useCharizard } from "../../context/charizard";

export const ReturnPokemon = ({ pokemon }) => {
  const { ditto } = useDitto();
  const { charizard } = useCharizard();

  if (pokemon === "ditto") {
    return <div>{ditto}</div>;
  }

  if (pokemon === "charizard") {
    return <div>{charizard}</div>;
  }

  return <div></div>;
};

I think your issue rely on the inability for stateless functions to handle anything else than a single JSX element. It simply doesn't know how to render properly your array.

I would advice you to wrap your array elements in a root <div> like this to make it work:

function DeliveryPreference (props) {
  return (
    <div>
      <h4>Delivery Preference</h4>
      <div className='yesNoCheckbox'>
        <input type="radio" value={'tube'} onChange={props.onChange} id='tube' checked={props.value === 'tube'}/> <label htmlFor='tube'>Tube</label> <br/>
        <input type="radio" value={'plate'} onChange={props.onChange} id='plate' checked={props.value === 'plate'}/> <label htmlFor='plate'>Plate</label><br/>
      </div>
    </div>
  )
}

Or else decompose your two JSX elements in different functions.

"You can now return an array of elements from a component’s render method."

The array of JSX is being compiled by React.Components render method. A stateless functional component lacks that render method.

You could either wrap your array of elements in a parent div instead of the array or use a regular class component.

I have an answer that might be a bit less confusing for newbies like myself. You can just use map within the components render method.

render () {
   return (
       <div>
           {stations.map(station => <div key={station}> {station} </div>)} 
       </div>
   );
}

You can use something like this:

import React from "react";
import Figure from './Figure';
import { render } from "react-dom";

const App = () => {
  const figures = [
    {
      config: 112,
      description: "description text 1"
    },
    {
      config: 787,
      description: "description text 2"
    }
  ];

  return (
    <div>

      { 
        figures.map((figure, key) => {
          return <Figure key={key} {...figure}/>
        })
      }

    </div>
  );
};

render(<App />, document.getElementById("root"));

And create a component called Figure like this:

import React from "react";

const Figure = (props) => {
   return (
    <div>
     <p>{props.description}</p>
     <p>{props.config}</p>
    </div>
  );
};

export default Figure;

If you’re always going to want to render all the components in your components file then you’re probably better off wrapping them in a React.Fragments tag.

Best practise is just to export this as a simple function that returns the components rather than as a constant.

So...

const Components = props => {
  return (
    <React.Fragment>

      <ComponentOne/>
      <ComponentTwo/>

    </React.Fragment>
  )
}

export default Components

That allows you to put multiple components next to each other without a DOM element containing them.

You should then just be able to render that by using it as a normal component and it’ll render all of them, so just import it then...

<Components />

Otherwise, if you want to treat them like an array, you have a function for free on the React object you’ve imported...

React.Children.toArray(arrayOfComponents)

You pass it an array of components (like in your original question) and it allows you to sort and slice it if you need to then you should be able to just drop it in the return of your render function