How can I return a array with React Components?-CodePudding

If you want to see this project running you can see the codesandbox in here.

I have a Landing component calling a ReturnPokemon component passing a string as props.

The ReturnPokemon component receives two arrays and sends back the array accordingly with the props it's receiving.

Now the Landing component has a console.log for the information that it is receiving from ReturnPokemon.

The problem with the code is Landing is not receiving the same array that ReturnPokemon receives, why is that? I need that ReturnPokemon send to Landing the same array it is receiving. How can I fix the code?

Landing:

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

ReturnPokemon:

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

export const ReturnPokemon = ({ pokemon }) => {
  const [chosenPokemon, setChosenPokemon] = useState();
  const { ditto } = useDitto();
  const { charizard } = useCharizard();

  if (pokemon === "ditto") {
    setChosenPokemon(ditto);
    return { chosenPokemon };
  } else if (pokemon === "charizard") {
    setChosenPokemon(charizard);
    return { chosenPokemon };
  } else {
    return;
  }
};

CodePudding user response：

It looks like you are trying to use a React component as if it were a React hook.

My suggestion would be to re-write as a React hook and then you should be able to correctly log the chosen pokemon:

Landing Becomes:

import { usePokemon } from "../../component/returnPokemon";

export const Landing = () => {
  const { chosenPokemon } = usePokemon("ditto");
  console.log(chosenPokemon);
  return (
    <>
      <h1>Landing</h1>
      {chosenPokemon.name}
    </>
  );
};

Instead write ReturnPokemon as a React Hook:

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

export function usePokemon(pokemon) {
  const { ditto } = useDitto();
  const { charizard } = useCharizard();

  if (pokemon === "ditto") {
    return { chosenPokemon: ditto };
  } else if (pokemon === "charizard") {
    return { chosenPokemon: charizard };
  } else {
    return null;
  }
};

CodePudding user response：

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>;
};