Home>

Currently, there is a React learning task, which is to inherit the background color css in Props and change it.

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

I referred to the site etc. of, but I did not understand well, so I set it with bigbuton.jsx and set it
How can I specify the background color in App.js?
Thanking you in advance.

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 (
    
    <header className = "App-header">
<Redbutton buttonparam = {'test'} />
{domArray}
<Text style = {this.props.bigStyle}></Text>
    </header>
    
  );
}
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';
    It seems that there is no place using big imported in, so it seems necessary to call big in the top file first.

    The following description is probably what you see in the first file.

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


    With this description, you should be able to call a component called big within your app.


    On top of that, I think the second file will look like this.

    import React from'react';
    class big extends React.Component {
      render () {
       /* Expand props received from the caller (App) * /
        const {
          bigStyle,
        } = this.props;
        return (
        <button
            style = {{width: '100px',
            height: '100px',
          }} />
         /* You cannot call big in big. Probably this is a button? ?? ?? * /
        <button style = {bigStyle} />
        );
      }
    }
    export default big;

Trends