javascript で値を渡したい

Question

onClick した際にクリックしたitemを引数に関数likeFluitsを発行したいのですが、fluitsListの中の値全てが引数となってしまいます。

例えばfluitsList = ['peach', 'apple']として、'peach'をクリックした場合
likeFluitsをLIKE_FLUITSアクションにdispatchさせ、payloadを'peach'としたいです。

const ExampleFluits = (props) =>(
            {props.fluitsList.map((item, idx)=>( 
                <sample key={item} onClick={(e)=>{{ console.log(`${e.target.innerText}was cliked`)
                props.likeFluits(props.item)}}>  ##ここでは選択したものがe.target.innerTextとして正常に出力できている
                    {itemKey}
                </sample>
            ))}


class Fluits extends React.Component {
 render(){
    <ExampleFluits 
     likeFluits={(e) => this.props.likeFluits(this.props.fluitsList)}
     />

const mapDispatchToProps = (dispatch) => ({
    likeFluits: (queryStore) => dispatch(LIKE_FLUITS(queryStore)),

})

export default connect(null, mapDispatchToProps)(Fluits);

Comments

[jun68ykt]

回答を書きましたが、とりあえず、ご質問に挙げられているコードを動かすようにして、それを修正するという手順を踏みました。正直いって、あまり（もしくは全く）役に立たない回答になっているかもしれません。その場合はいま手元にあるコードの抜粋ではなく、現状のものをほぼそのまま見たいので、index.js だったり、アクションやリデューサー、package.json なども含めて、GitHub に入れてもらうことは可能でしょうか？

[退会済みユーザー]

こちらの情報不足の中丁寧にご回答くださりありがとうございます。git確認しました。しかし解決できず、結局自己解決いたしました。

[jun68ykt]

どういたしまして。自己解決されたとのことで、よかったです ????

[退会済みユーザー]

はい、ご返答ありがとうございます。しかし付随で不明点が出てきた為、よろしければければこちらもお答えいただけないでしょうか。
https://teratail.com/questions/190154

[jun68ykt]

そちらのご質問にも回答しましたので、ご一読ください。

Answer 1

こんにちは。

以下、役に立つ回答になっているか、やや心もとないのですが、ご質問にあるコードに対していくつか修正し、さらに、いくつかのファイルを補って、動くReactアプリにしたものを GitHub の以下のレポジトリ

• https://github.com/jun68ykt/q189122

に上げました。ベースになるアプリを create-react-app で作成していますので、もし Gitをお使いであれば、ターミナルから、以下の手順で動作確認できます。

• git clone [e-mail]:jun68ykt/q189122.git

　

• cd q189122

　

• yarn install

　

• yarn start

　

上記によって、以下のように表示されます。（ブラウザのデベロッパーツールを開いておきます）

上記の状態から、 peach と表示されている灰色の部分をクリックすると、redux-logger によって以下のようにconsoleに表示されます。

console に prev state ▶ 、 action ▶、 next state ▶ と表示されている右向きの三角をクリックすると、それぞれの内容が展開されます。

上記のconsole では、 LIKE_FRUITSアクションが発行されたことにより、state がどのように変わったかが分かります。

作成したサンプルでは、 state は fruits というプロパティを持ち、これの値は配列です。 state.fruits は初期状態では空の配列で、各フルーツ名が表示されている灰色の部分をクリックすると、該当のフルーツ名（だけ）が、state.fruits に追加されていくことが、 console に出されたログを追っていけば分かると思います。

また、ソースコードの修正については、コミットを古い順に追っていけば、どのような修正をしたかが分かると思います。

上記のコードは、ご質問に挙げられている Fluitsをとりあえず動作確認できるようにしただけなので、このご質問の元になっている、oratyadottoさんが実際に手がけているアプリでは、他にも多くのコンポーネントやRedux要素がからんでいると思われますので、それらの修正に直接、役に立つ回答になっているかというと、あまり自信はないのですが、何らかの参考にして頂ければ幸いです。