質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 406

NinnJinn

score 10

前提・実現したいこと

親コンポーネントで選択された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なども使えると思うのですが。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/22 21:16

    前回に引き続きご回答いただきありがとうございます。
    別のエラーが出てしまったため{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=&#039; +
    sword +
    ' inurl:/recipe/ site:cookpad.com'

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

    キャンセル

  • 2018/12/22 22:09

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

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

    キャンセル

  • 2019/01/05 16:02

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる