How to call React api component into main component?

Question

I'm new to React and I have written some API call in component and when I try to add the imports in my main component it shows following error ERROR in ./src/containers/Ready_bricksapi.jsx Module not found: Error: Can't resolve 'exports' in 'D:\Brickzle (1)\src\containers'

@ ./src/containers/Ready_bricksapi.jsx 1:0-65

@ ./src/containers/homepage.jsx

@ ./src/containers/app-route.jsx

@ ./src/entry-points/client.jsx

@ multi webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/entry-points/client.jsx

import React, { Component } from 'react';


export  class ReadyBricks extends Component {
   Constructor(props) {
     Super(props);
     this.setState = {
       bricksList: []


     };


   }
  componentDidMount() {
    this.readyBrick();
  };

     readyBrick() {
     console.log("inside get api");
     const url = '\'http://10.10.1.42:8070/api/user/brick/getBrickList?id=0\'';
       fetch(url, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
           'auth':'sdf345dvdfg4dfgdf435fghfhfg45123'
         },
       })
         .then(function (response) {
           let bricksList=response.results;
           return bricksList;
           console.log(bricksList);
         })

         .catch(function(error) {
           console.log(JSON.stringify(error));
         });





     }


  render() {
    const ReadyBricks = this.state.bricksList.map((item) => {
      return <div className="col-xs-12">
        <div className="col-xs-6">
          <p>Ready Brick Arts </p>
          {item}
        </div>
      </div>
    });


  }

 }

now my question is how to add this jsx file into my components

Please look for a React beginner tutorial, it will show you how. — Mikkel, Sep 29 '17 at 10:53
can u please suggest some links , because that will be payable — arvind grey, Sep 29 '17 at 10:56
Take a look at this : https://stackoverflow.com/questions/33956201/how-to-import-and-export-components-using-react-es6-webpack — Shota, Sep 29 '17 at 12:11

score 0 · Answer 1 · answered Sep 29 '17 at 12:32

I don't know what you mean by 'payable' - are you offering to pay for advice? I'm not really interested in that.

Here is how you do it. On a page somewhere (usually index.html) you nominate a HTML element to receive the top level render() from React.

Let's say your HTML looks like this

<body>
  <div id="myDiv"></div>
</body>

and in your script you do this:

React.render(
    <ReadyBricks/>,
    document.getElementById('myDiv')
);

So that will render your ReadyBricks component into the myDiv div.

But if you don't know that already, and you want to build things with React, then you really do need to do a course.

How to call React api component into main component?

1 Answers1