reactでのいいねボタン作成

Question

前提・実現したいこと

react mapの使い方

発生している問題・エラーメッセージ

特に無し

該当のソースコード

-イメージはいいねボタンです。-

{****map((photo, index) =>
---コード---
<FaHeart 
className="faheart" id="faheart" 
onClick={() => setShowHeartitems(!showHeartitems)} 
style={{color: showHeartitems ? "white" : "#E0306C"}}/>
---コード---
)}[

ざっくりとですがこのような構造でjsonをmapで処理しています。

そこで、記載させて頂いた<FaHeart...からのコードでハートのマークをタップするとハートの色が変わるというコードを書きたいと思っているのですが、現状1つのハートをタップすると処理されている全てのハートの色が変わってしまいます。
keyを付けてみたり試行錯誤したのですが、現状維持で改善しませんでした。

実現したいこととしては、
・１つ１つハートが変わること
・色が変わったハートのkey?index?を取得出来る事

宜しくお願い致します。

試したこと

ここに問題に対して試したことを記載してください。

Comments

[hoshi-takanori]

showHeartitems が一つの boolean 値になってると思いますが、これを配列またはオブジェクトにする必要があるでしょうね。

[Ajay]

回答の程、ありがとうございます。

回答の通りboolean になっております。
具体的にどのようにすれば良いでしょうか？
お手数おかけしますが、初心者のため、お願い出来ると幸いです。
宜しくお願い致します。

[hoshi-takanori]

具体的に答えるには、もう少し情報というか、前後のソースが欲しいですね。
map の前にある配列 (photo の配列？) の要素は固定ですか？ 内容は URL か何か？
色が変わったハートのkey?index?を取得する際の key? index? はどうなって欲しいですか？
あと、const [showHeartitems, setShowHeartitems] = useState(false); ってことですよね。

[Ajay]

承知致しました。
お手数おかけして申し訳ないです。

hoshi-takanori様の記述通り下記の通りに書いております。
const [showHeartitems, setShowHeartitems] = useState(false);

長くなりますが、下記がmapの省略無しのバージョンです。
<div id="second">
{filteredInfo1000.map((photo, index) =>
<div className="photo-box">
<img src={photo.photo} className="photo-items" />
<div className="flex-bottom">
<div className="heat-box">
<div className="heart-back" id="heart-back" onClick={() => setShowHeartitems(!showHeartitems)} style={{backgroundColor: showHeart ? "#E0306C" : ""}}>
{/* 本体 */}
<FaHeart className="faheart" id="faheart" onClick={() => setShowHeartitems(!showHeartitems)} style={{color: showHeartitems ? "white" : "#E0306C"}}/>
</div>
</div>
<a href={photo.link}><h3 className="photo-instagram"><FaInstagram className="Fainstagram" />Instagram</h3></a>
</div>
</div>
)}
</div>

jsonには、下記の3点の情報が書き込まれております。
{
key: 1,
photo: Photo1001,
link: "http://Instagram.com/....個人情報の為....",
},

特に手段等は選びません。（配列等の固定なども特に考えていません。）

Answer 1

こんな感じでいかがでしょうか。

import React, { useState } from 'react';
import { FaHeart, FaInstagram } from 'react-icons/fa';

// 画像は http://aws.random.cat/ よりお借りしました。
const filteredInfo1000 = [
  {
    key: 1,
    photo: 'https://purr.objects-us-east-1.dream.io/i/8O1TS.jpg',
    link: 'http://aws.random.cat/view/317'
  },
  {
    key: 2,
    photo: 'https://purr.objects-us-east-1.dream.io/i/20170831_102918.jpg',
    link: 'http://aws.random.cat/view/1494'
  },
  {
    key: 3,
    photo: 'https://purr.objects-us-east-1.dream.io/i/20161003_163413.jpg',
    link: 'http://aws.random.cat/view/1246'
  }
];

function App() {
  // showHeart がよく分からなかったので仮にtrue にしてみました。
  const showHeart = true;
  const [showHeartitems, setShowHeartitems] = useState([]);

  // showHeartitems は選択された項目の key の配列です。
  console.log(showHeartitems);

  // ハートが押された時の処理。
  const toggleShowHeart = (key) => {
    // showHeartitems に key が含まれてるかチェックして、
    if (showHeartitems.includes(key)) {
      // 含まれていたら key を削除。
      setShowHeartitems(showHeartitems.filter(item => item !== key));
    } else {
      // 含まれてなければ key を追加。
      setShowHeartitems([...showHeartitems, key]);
    }
  };

  return (
    <div id="second">
      {filteredInfo1000.map((photo, index) =>
        <div key={photo.key} className="photo-box">
          <img src={photo.photo} className="photo-items" />
          <div className="flex-bottom">
            <div className="heat-box">
              <div className="heart-back" id="heart-back" onClick={() => toggleShowHeart(photo.key)} style={{backgroundColor: showHeart ? "#E0306C" : ""}}>
                {/* 本体 */}
                <FaHeart className="faheart" id="faheart" onClick={() => toggleShowHeart(photo.key)} style={{color: showHeartitems.includes(photo.key) ? "white" : "#E0306C"}}/>
              </div>
            </div>
            <a href={photo.link}><h3 className="photo-instagram"><FaInstagram className="Fainstagram" />Instagram</h3></a>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

Comments

[Ajay]

hoshi-takanori様

機能するようになりました！
本当にありがとうございます！