• Home
  • Jobs
  • Courses
  • Teachers
  • For business
  • Blog
  • ES/EN

0

7
Views
AJAX call in react doesnt log anythin in console nor it shows anything in div

I have a index.html file where i have included these scripts near body tag and this div tag.

<div id="app"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script type="text/jsx" src="getrepodata.js"></script>

In getrepodata i try to make an ajax call with react, but it doesnt show anything in console log of index.html file connected onto a local server from xampp

'use strict';
class MyComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        items: []
    };
}

componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    items: result.items
                });
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.
        (error) => {
          this.setState({
          isLoaded: true,
          error
        });
        )
console.log(items);
}

render() {
    
    const { error, isLoaded, items } = this.state;
    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
       
        return (
            console.log("foo");
            console.log(item);
            <ul>
                {items.map(item => (
                    <li key={item.id}>
                        {item.name} {item.price}
                    </li>
                ))}
            </ul>
        );
    }
}
}

const domContainer = document.querySelector('#app');
ReactDOM.render(<MyComponent/>, domContainer);

I have looked everywhere and havent found a solution for this. Thanks!

10 days ago ·

Santiago Trujillo

Answer question
Remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Startups
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.