親から子へのpropsの受け渡し

Question

前提・実現したいこと

親コンポーネントで選択されたwordsを子コンポーネントで使いたいのですが、
propsの受け渡しができていないみたいで、
どの様にコードを書けばいいかわかりません。

検索ボックス＋検索ボタンが子コンポーネントとなっており、
それより下は親コンポーネントとしております。
にらを選択すれば検索ボックスの左横に<span>にら</span>が追加されるようにしたいです。

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

C:\Users\matus\GATSBY\Serch\src\components\searchbar.js
   5:3  warning  Useless constructor     no-useless-constructor
  11:9  error    'props' is not defined  no-undef

該当のソースコード

import React from "react"
import "./wordlist.css"
import Searchbar from './searchbar'

const vegetables = [ 
  '大根', '玉ねぎ', 'キャベツ', '白菜', '人参', 'トマト',
  'きゅうり', 'かぼちゃ', 'レタス', 'もやし',
   'ねぎ','ブロッコリー','ピーマン','ごぼう','なす','かぶ','れんこん',
   'ほうれんそう','小松菜','ちんげん菜','じゃがいも','にら'
];

class Wordlist extends React.Component {
constructor(props){
  super(props);
  const words=[{
  },]
  this.state={
    words:words,
};
this.onWordSelected=this.onWordSelected.bind(this)
}
  onWordSelected(e){
    e.preventDefault();
    const words = this.state.words.slice()
    console.log(e.target.innerText)
    words.push(e.target.innerText
    )
    this.setState({words})
  };

  render() {
    return (
      <div className="wordfont">
      <Searchbar data={this.state.words} />
      {vegetables.map(word => 
        <span
          key={word}
          onClick={this.onWordSelected.bind(this)}>
          {word}
        </span>)
      }

    </div>
    );
  }
}
export default Wordlist

import React from 'react'
import './searchbar.css'

class Searchbar extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div className="search">
       {props.data.map(word => 
        <span
          key={word}>
          {word}
        </span>)}
        <input type="text" id="searchword" />
        <input
          type="submit"
          value="検索する"
          id="searchbutton"
          onClick={this.search}
        />
      </div>
    )
  }
  search() {
    var sword = document.getElementById('searchword').value
    window.open(
      'https://www.google.co.jp/search?q=' +
        sword +
        ' inurl:/recipe/ site:cookpad.com'
    )
  }
}
export default Searchbar

試したこと

const Searchbar = (props) =>など
{this.props.data.map(word =>
<span key={word}>
{word}
</span>)}

補足情報（FW/ツールのバージョンなど）

Gatsbyというstatic site generatorを使っています。
Reactで動いておりimportしているためpropsなども使えると思うのですが。

Answer 1

class Searchbar extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div className="search">
       {props.data.map(word => 
      //↑単なるpropsではエラー

クラスコンポーネントの場合、this.propsとする必要があります。

Comments

[NinnJinn]

前回に引き続きご回答いただきありがとうございます。
別のエラーが出てしまったため{this.props.data.map(.....}の部分を削除し
以下のようにconsole.log(this.props.data)としてみたところ
Cannot read property 'props' of undefined
とエラーが出てしまいました。

search() {
var sword = document.getElementById('searchword').value
window.open(
'https://www.google.co.jp/search?q=' +
sword +
' inurl:/recipe/ site:cookpad.com'

)
console.log(this.props.data)
}
}
export default Searchbar

[maisumakun]

onclick={this.search}と関数だけ渡した結果、thisが分離してしまいます。

以下のどちらかの方法をとってください。
・コンストラクタで「this.search = this.search.bind(this);」と事前にbindしておく
・search = () =>{...} という、プロパティ定義＋Arrow Functionで定義する

[NinnJinn]

ありがとうございます。コンストラクタでbindしたところ動くようになりました。
本当に助かりました。