（React)propsを用いてcssが変更できない

Question

現在React学習の課題があり、それは、Propsで背景色のcssを継承をして、変更するということを行ってるんですが、

https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504

のサイトなどを参考にしたんですが、よくわからなくなってしまい、bigbuton.jsxで設定して、
App.jsで背景色の色を指定するにはどうしたら良いでしょうか。
宜しくお願いします。

import  './logo.svg';
import './App.css';
import Redbutton from './Components/training/Redbutton';
import big from './Components/training/bigbutton';



function App() {
  const domArray = [];
  for (let i = 1; i < 10;i +=1){
   domArray.push(<Redbutton buttonparam={i} />)
  }
  return (
    <div className="App">
      <header className="App-header">
<Redbutton  buttonparam={'test'}/>
{domArray}
<Text style={this.props.bigStyle}></Text>
      </header>
    </div>
  );
}

export default App;

import React from 'react';

class big  extends React.Component {
  render() {
    return(
      <button
      style={{width:'100px',
      height:'100px',
      }}>

      <big  bigStyle={{backgroundColor:'red'}} />
      );
      
    }
}

export default big;

Failed to compile.

./src/Components/training/bigbutton.jsx
SyntaxError: /Users/abeshmupeii/react-quest/04_react_component/class/src/Components/training/bigbutton.jsx: Unterminated JSX contents (11:49)

   9 |       }}>
  10 | 
> 11 |       <big  bigStyle={{backgroundColor:'red'}} />
     |                                                  ^
  12 |       );
  13 |       
  14 |     }

Answer 1

import big from './Components/training/bigbutton';
でimportしたbigを使用しているところがなさそうなので、まずは1番上のファイル内でbigを呼び出す必要がありそうです。

以下の記述は、おそらく一つ目のファイルに記載するものではないかと思います。

<big bigStyle={{backgroundColor:'red'}} />

この記述で、bigというコンポーネントをApp内で呼び出すことができるはずです。

---

そのうえで、2つ目のファイルがこんな感じになるのではないかと思います。

import React from 'react';

class big extends React.Component {
  render() {
    /* 呼び出し元（App）から受け取ったpropsを展開 */
    const {
      bigStyle,
    } = this.props;

    return(
      <button
        style={{width:'100px',
        height:'100px',
      }} />
      
      /* bigの中でbigは呼び出せない。おそらくここはbuttonのはず？？？ */
      <button style={bigStyle} />
    );

  }
}

export default big;

Comments

[takoyan]

ありがうございます。できました。