Creating a React component

Question

I'm trying to create one component (one HTML-circle) in React, but I get 'unknown error':

ReactDom.render(
  <main>
    <h1>Below is my component</h1>
      <Html_component />
  </main>, document.getElementById('root') );
  
  function Html_component(){
  return(
    <main>
      <div style="border-radius: 50%; background-color: black; width: 10px; height: 10px;"></div>
    </main>
  )
}

<div id="root"></div>

can you please share your error message here?

tareq aziz
– tareq aziz

2019-11-29 14:01:40 +00:00
Commented Nov 29, 2019 at 14:01 — tareq aziz
– tareq aziz, Commented Nov 29, 2019 at 14:01

Dupocas · Accepted Answer · 2019-11-29 12:29:57Z

2

ReactDOM.render expects as first argument an instantiated component, you are just passing jsx.

function App() {
    return (
        <main>
            <h1>Below is my component</h1>
            <Html_component />
        </main>
    )
}

function Html_component() {
    return (
        <main>
            <div style="border-radius: 50%; background-color: black; width: 10px; height: 10px;"></div>
        </main>
    )
}

ReactDom.render(<App />, document.getElementById('root'));

Remeber, a functional component is a function which returns jsx

edited Nov 29, 2019 at 12:29

answered Nov 29, 2019 at 12:26

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

Comments

gsaandy · Accepted Answer · 2019-11-29 13:51:49Z

See the following examples, save each code as html files(say example1.html and example2.html) and open in a browser you can see the result

Simple example without using jsx

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/javascript">

    ReactDOM.render(
      React.createElement(
        "main",
        null,
        React.createElement("h1", null, "Below is my component"),
        React.createElement(Html_component, null)
      ),
      document.getElementById("root")
    );

    function Html_component() {
      return React.createElement(
        "main",
        null,
        React.createElement("div", {
          style: {
            borderRadius: "50%",
            backgroundColor: "black",
            width: "10px",
            height: "10px"
          }
        })
      );
    }

  </script>

</body>

</html>

Example using jsx

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    ReactDOM.render(
      <main>
        <h1>Below is my component</h1>
        <Html_component />
      </main>,
      document.getElementById("root")
    );

    function Html_component() {
      return (
        <main>
          <div
            style={{
              borderRadius: "50%",
              backgroundColor: "black",
              width: "10px",
              height: "10px"
            }}
          ></div>
        </main>
      );
    }


  </script>

</body>

</html>

you can see more details about jsx here https://reactjs.org/docs/jsx-in-depth.html

kelvin kantaria · Accepted Answer · 2019-11-29 12:38:06Z

0

spell mistake and style property change

try this

function Html_component() {
return (
    <main>
        <div style={{ 'border-radius': "50%", 'background-color': 'black', width: '10px', height: '10px' }}></div>
    </main>
)}   

ReactDOM.render(
<main>
    <h1>Below is my component</h1>
    <Html_component />
</main>, document.getElementById('root'));

edited Nov 29, 2019 at 12:38

answered Nov 29, 2019 at 12:30

kelvin kantaria

1,44811 silver badges15 bronze badges

1 Comment

Dupocas Over a year ago

This won't work. You're still passing a jsx statement to ReactDOM.render

Nikola Lukic · Accepted Answer · 2019-11-29 13:03:22Z

This is better concept to use always class model with defined state params , props and maybe callback ...

Include interface's also...

interface propsInterface {
  title: string
};

interface stateInterface {
  visibility: boolean
};

class Below extends React.Component <propsInterface, stateInterface > {

 constructor(props) {
    super(props);
    this.state = { visible: true};
 }
  
 render() {
  if (this.state.visible === true) {
    return (
     <main>
      <div>{this.props.title}</div>
     </main>
   );
  } else {
    return (<div></div>);
  }
  }  
 };
  
  
 ReactDOM.render(
  <Below title="Below component." />,
   document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Collectives™ on Stack Overflow

Creating a React component

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related