cannot create react element using es6

Question

i have this code so far and trying to use ES6 syntax to create buttons onto webpage

import React from 'react';
import ReactDOM from 'react-dom';

class CustomButton extends React.Component {
  render() {
    return <button>{this.props.text}</button>
  };
};

class Element extends React.Component {
  render() {
    return (
      <div>
        <CustomButton text="I" />
        <CustomButton text="know" />
        <CustomButton text="React!" />
      </div>
    );
  };
};

ReactDOM.render(
  Element,
  document.querySelector('#root')
);

however nothing is being created on the web page.

devserkan · Accepted Answer · 2020-07-11 21:30:43Z

3

You are using the render part wrong. You are defining a component there so, it should be like that:

ReactDOM.render(
  <Element />,
  document.querySelector('#root')
);

Your Element is not a JSX element actually, it is a class component so you should use it properly.

const foo = <div>Foo</div>;

ReactDOM.render(
  foo,
  document.querySelector('#root')
);

This works because foo is an element, it is not a class or a functional component.

See for more.

answered Jul 11, 2020 at 21:30

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

cannot create react element using es6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related