react 子コンポーネントに引数を渡す

Question

親コンポーネント：<Card list="a,b,c" />

子側：

import React from 'react';
import theme from './Card.css';

function eachLi(props) {
	console.log(props);
	return props.join(",");
}

const Card = (props) => (
	<p>
		{eachLi(props.list)}
	</p>
);

export default Card;

このような感じで出力したいのですが、
console.logには確かにデータはきているのですが、
joinのところではおそらくデータが入っていないようで
エラーになります。。
何か出力のタイミングの問題だとおもうのですが、
どう書いたらよいでしょうか？

Comments

[masaya_ohashi]

あなたのこのコードは、<p>の中に「どんな表示がされること」を想定したコードですか？

[cheche0830]

<p>abc</p> ですね！

[masaya_ohashi]

それは渡されたprops.listが["a","b","c"]という形だった場合<p>abc</p>にしたい、ということであっていますか？

[cheche0830]

あ、すいません、<p>abc</p>にする場合は.splitではなく.joinでした・・joinが正しいです。

Answer 1

import React from 'react';
import theme from './Card.css';

function eachLi(props) {
    console.log(props);
    return props.join(",");
}

const Card = (props) => (
    <p>
        {eachLi(props.list)}
    </p>
);

export default Card;

このコードで親からCardに渡す引数が<Card list="a,b,c" />であればjoinは間違いです。渡されたlistは文字列であり、 joinメソッドを持ちません。文字列を分解するsplitで配列に分解して返せば{eachLi(props.list)}部分はabcという文字列になります。

<Card list={[a,b,c]} />であれば、渡されたlistは配列であり、joinが正しいです。ただし、joinで得られる結果の文字列はa,b,cであり、間にjoinに渡した引数の,が挟まれます。なにもはさみたくないならjoin("")~~またはjoin()~~としてください。
(嘘つきました。引数無しのjoin()だとデフォルトで,が挟まります)

追記

Cardにlistが渡されないパターンが存在する場合、Cardの中でlistを「存在する前提」で使ってはいけません。必ずnullやundefinedになっていないかチェックする必要があります。

function eachLi(props) {
    console.log(props);
    if(Array.isArray(props)) { // propsが配列である
        return props.join(",");
    }
    else { // propsが配列ではない(nullやundefinedだった場合)
        return "";
    }
}

Comments

[cheche0830]

ありがとうございます。無事配列で取得することができたのですが、（console.logの部分で確認）やはりjoinのところでつまづくようで、

TypeError: Cannot read property 'join' of undefined

とでます。.join(",") .join()とも試しましたが同じでした・・・

[masaya_ohashi]

親から渡されるlistは必ず中身が存在していますか？変数などでnullになるタイミングはありませんか？

[masaya_ohashi]

また、このコードは「本当に全て」ですか？見せられないと削っていたり、console.logとreturnの間に何か処理をしていませんか？

[masaya_ohashi]

もしくは、<Card/>のように、listを渡さないで使う場面がありませんか？

[cheche0830]

あ、このカードはたくさんあり引数がないものもあります！

[cheche0830]

ああ、そこは盲点でした。。。
ありがとうございます！試してみます！

[cheche0830]

ばっちりできました！！！！ありがとうございました！！！！