LoginSignup
shi_082844
@shi_082844 (道浩 清水)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

ボタンを押したら選択した果物の絵が選べるUIを作りたい

解決したいこと

ボタンを押したら選択した果物の絵が選べるUIを作りたい
【希望の挙動】 
appleを押したらりんごの絵 carrotを押したらにんじんの絵 grapeを押したらぶどうの絵
clearを押したら3つに戻るという挙動

完成イメージ図
スクリーンショット 2022-07-08 23.30.28.png

実装におけるルール

・dataSourceを使用して配列の操作を行う(.mapの使用必須 .filterの使用自由 useStateの使用自由)
・button onClick={() =>は一行のみ
・アロー関数を使用する。
※dataSourceはコンポーネント

フォルダ階層

スクリーンショット 2022-07-08 23.40.27.png

スクリーンショット 2022-07-08 23.40.56.png
※dataSourceコンポーネントの中身

現状と該当するソースコード

スクリーンショット 2022-07-08 23.44.43.png

App.tsx内のコード
import "./styles.css";
import { AppleSvg, CarrotSvg, GrapeSvg } from "./assets/svg/";
import { useState } from "react";

export default function App() {
  const [Apple, setApple] = useState(false);
  const onClickSwitch = () => {
    setApple(!Apple);
  };

  return (
    <div className="App">
      <AppleSvg />
      <CarrotSvg />
      <GrapeSvg />
      <br />
      <button onClick={onClickSwitch}>apple</button>
    </div>
  );
}

自分で試したこと

現状、ボタン名を出すのが一苦労です、、、
もし可能であればコード解説含めて回答いただける方いらしたらお願い致します。

0

1Answer

絵が選べる

選べるとは...

appleを押したらりんごの絵 carrotを押したらにんじんの絵 grapeを押したらぶどうの絵
clearを押したら3つに戻るという挙動

appleを押したらりんごの絵だけ表示する
という意味?

もし可能であればコード解説含めて回答いただける方いらしたらお願い致します。

ここまで求めるならファイルを用意しておけば参加し易いような...
dataSourceというのも画像でコピーできないし...

1Like

Comments

  1. @shi_082844

    Questioner
    ありがとうございます!実現したい挙動になってます、、、日々精進します!

Your answer might help someone💌