CODEWITHSUNDEEP
reactjsreact-hooks
user17920704
user17920704

Reputation:

How to display corresponding image from selected item in React using hooks

The main goal is to be able to select a pokemon from the menu and once the user has selected a pokemon, the image right below changes to display the matching image of the pokemon. (e.g. By default, Bulbasaur is selected and the image of Bulbasaur is displayed. Once the user picks Charmander, the image of Bulbasaur changes to Charmander.)

The 2 main components are StarterSelector containing the drop down menu with all the options and StarterShower containing the images.

Currently, I have the menu working fine but I am trying to figure out how to display the corresponding image to the selected pokemon in the menu.

I have tried to add an onChange function that will handle the logic once the item in the menu is selected but I can not figure it out how to make it all work together.

App.js

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import StarterSelector from "./StarterSelector";
import StarterShower from "./StarterShower";

function App() {
  const [starterList, setStarterList] = useState([
    { id: 1, name: "Bulbasaur" },
    { id: 2, name: "Charmander" },
    { id: 3, name: "Squirtle" },
  ]);

  const [imgList, setImgList] = useState([
    { id: 1, image: "/assets/img/bulbasaur.png" },
    { id: 2, image: "/assets/img/charmander.png" },
    { id: 3, image: "/assets/img/squirtle.png" },
  ]);

  return (
    <div className="App">
      <header className="App-header">
        <StarterSelector starterList={starterList} />
        <StarterShower imgList={imgList} />
      </header>
    </div>
  );
}

export default App;

StarterSelector.js

    import React, { useState } from "react";
    import StarterShower from "./StarterShower";
    
    export default function StarterSelector({ starterList }) {
      const onChangePokemon = (imgList) => {
        alert("Pokemon changed");
      };
    
      return (
        <div>
          Pick your favorite pokemon :
          <select onChange={onChangePokemon}>
            {starterList.map((starterList) => (
              <option key={starterList.id} value={starterList.name}>
                {starterList.name}
              </option>
            ))}
          </select>
        </div>
      );
    }

StarterShower.js

import React, { useState } from "react";

export default function StarterShower({ imgList }) {
  return (
    <section>
      {imgList.map((imgList) => {
        return <img src={imgList.image} alt={imgList.id}></img>;
      })}
    </section>
  );
}

Upvotes: 1

Views: 726

Answers (1)

Jes&#250;spinarte
Jes&#250;spinarte

Reputation: 171

This can work, you just get the value of the target, which in this case, is the name, it would be better to have the id as the <option> value though. So, you grab that value and you search the item on the list, and that's it :)

import React, { useState, useEffect } from "react";
import StarterShower from "./StarterShower";

export default function StarterSelector({ starterList }) {
  const [selectedPokemon, setSelectedPokemon] = useState();

  const onChangePokemon = (event) => {
    setSelectedPokemon(
      starterList.find((pokemon) => pokemon.name === event.target.value)
    );
  };

  useEffect(() => {
    console.log("New pokemon selected: ", selectedPokemon);
  }, [selectedPokemon]);

  return (
    <div>
      Pick your favorite pokemon:
      <select onChange={onChangePokemon}>
        {starterList.map((starterList) => (
          <option key={starterList.id} value={starterList.name}>
            {starterList.name}
          </option>
        ))}
      </select>
    </div>
  );
}

Upvotes: 1

Related Questions