0

I'm new to React and got a Failed to compile error when trying to get api data with axios.

Axios.js:

import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://localhost:8001'
})

export default instance;

Cards.js:

import React, { useState, useEffect } from 'react'
import "./Cards.css"
import TinderCard from "react-tinder-card"
import axios from './Axios'

function Cards() {
    const [people, setPeople] = useState([]);

useEffect(() => {
    async function fetchData () {
        const req = await axios.get("/tinder/cards")

        setPeople(req.data);
    }

    fetchData()
}, [])

const swiped = (direction, nameToDelete) => {
    console.log("removing: " + nameToDelete);
    // setLastDirection(direction)
}

const outOfFrame = (name) => {
    console.log(name + "left the screen!");
}

return (
    <div className="Cards">
        <div className="Cards__cardContainer">
            {people.map((person) => (
                <TinderCard
                className="swipe"
                key={person.name}
                preventSwipe={["up", "down"]}
                onSwipe={(dir) => swiped(dir, person.name)}
                onCardLeftScreen={() => outOfFrame(person.name)}
                >
                    <div
                    style={{ backgroundImage: `url(${person.url})`}}
                    className="card"
                    >
                        <h3>{person.name}</h3>

                    </div>
                </TinderCard>
            ))}
        </div>
    </div>
)
}

export default Cards;

Error:

Failed to compile.

./src/Axios.js SyntaxError: C:\Users\suhai\Documents\evP\Hinder\h\highlancer\src\Axios.js: Unexpected token (1:18)

1 | import axios from axios

| ^

2 |

3 | const instance = axios.create({

4 | baseURL: 'http://localhost:8001'

1 Answer 1

2

Looks like your import is off, give this a go.

import axios from 'axios';
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.