Passing data to another component in React-CodePudding

In my code, I have it so the user can search for the type of Pokémon they want. When the user submits it, I want to send it to another component to display all the information. The issue is that the data isn’t passing through to the other component. I’m pretty new to react, so I might be missing something obvious.

This is the component that retrieves the data from the API.

const Search = () => {
  const [inputValue, setInputValue] = useState("");
  const [userData, setUserData] = useState([]);
  const userInput = (e) => {
    setInputValue(e.target.value);
  };
  const handleClick = (e) => {
    e.preventDefault();
    apiCall(inputValue);
  };

  const apiCall = async (name) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${name}`;
    const response = await fetch(url);
    const data = await response.json();
    setUserData(data);
  };
  return (
    <div>
      <button className="btn" onClick={handleClick}>
        Search
      </button>
      <input
        type="search"
        onChange={userInput}
        value={inputValue}
        placeholder="Enter your pokemon name"
        className="btn-search"
      ></input>
      <div>
        <PokiApi props={userData} />
      </div>
    </div>
  );
};

This is the component that I want to display the API data to the page.

export default class PokiApi extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.props,
    };
  }
  render() {
    return (
      <div>
        <div>
          <div>{this.state.data}</div>
        </div>
      </div>
    );
  }
}

When I run it this is what I get

CodePudding user response：

This is what you need

const Search = () => {
  const [inputValue, setInputValue] = useState('');
  const [userData, setUserData] = useState();

  const userInput = (e) => {
    setInputValue(e.target.value);
  };

  const apiCall = async (name) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${name}`;
    const response = await fetch(url);
    const data = await response.json();
    setUserData(data);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    apiCall(inputValue);
  };

  return (
    <div>
      <form action='' onSubmit={handleSubmit}>
        <button className='btn'>Search</button>
        <input type='search' onChange={userInput} value={inputValue} placeholder='Enter your pokemon name' className='btn-search' />
      </form>
      <div>
        <PokiApi data={userData} />
      </div>
    </div>
  );
};

const PokiApi = ({ data }) => {
  // data is an array
  if (!data) {
    return <div>Enter pokemon to get the data</div>;
  }
  return (
    <div>
      <h1>{data.name}</h1>
    </div>
  );
};

CodePudding user response：

Try this:

const PokiApi({props}) {
  return (
    <div>
      <div>
        <div>{props}</div>
      </div>
    </div>
  );
}

the props in the function component will be userData and props.props is undefined