CODEWITHSUNDEEP
reactjs
Amine Ouahioune
Amine Ouahioune

Reputation: 21

it show nothing REACT

hi guys am a bignner in web dev and trying to learn so there is my pen

https://codepen.io/amine-ouahioune/pen/eYVxJdL

class App extends React.Component {
  state = {
    keys: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"]
  };
  render() {
    const { keys } = this.state;
    return (
      <div className="inner-container" id="drum-machine">
        <div id="display">
          {keys.map((key, idx) => (
            <box text={key} key={idx} />
          ))}
        </div>
      </div>
    );
  }
}
const box = (props) => <div className="box">{props.text}</div>;

ReactDOM.render(<App />, document.getElementById("app"));

normaly when i use map it show me all the letter in my diplay why it doesn't ?

Upvotes: 0

Views: 40

Answers (1)

khandaniel
khandaniel

Reputation: 305

You should name your components in PascalCase. If you change your code to

<Box text={key}...

and

const Box = (props)...

then you'll get what you expect

Upvotes: 1

Related Questions