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

親コンポーネント：<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のところではおそらくデータが入っていないようで
エラーになります。。
何か出力のタイミングの問題だとおもうのですが、
どう書いたらよいでしょうか？

masaya_ohashi

2018/02/01 03:51

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

cheche0830

2018/02/01 03:52

abc ですね！

masaya_ohashi

2018/02/01 03:54

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

cheche0830

2018/02/01 03:56

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

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1import React from 'react';
2import theme from './Card.css';
3
4function eachLi(props) {
5    console.log(props);
6    return props.join(",");
7}
8
9const Card = (props) => (
10    <p>
11        {eachLi(props.list)}
12    </p>
13);
14
15export 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になっていないかチェックする必要があります。

JavaScript
1function eachLi(props) {
2    console.log(props);
3    if(Array.isArray(props)) { // propsが配列である
4        return props.join(",");
5    }
6    else { // propsが配列ではない(nullやundefinedだった場合)
7        return "";
8    }
9}

投稿2018/02/01 04:00

編集2018/02/01 04:26

masaya_ohashi

総合スコア9206

cheche0830

2018/02/01 04:08

ありがとうございます。無事配列で取得することができたのですが、（console.logの部分で確認）やはりjoinのところでつまづくようで、 TypeError: Cannot read property 'join' of undefined とでます。.join(",") .join()とも試しましたが同じでした・・・