Invalid JSON import in React

Question

i got this error while trying import data from JSON file in the App component below:

Uncaught TypeError: start is undefined

import './App.css'; import PreNavbar from './Components/PreNavbar'; import Navbar from "./Components/Navbar.js"; import {BrowserRouter as Router} from "react-router-dom"; import Slider from "./Components/Slider.js"; import banner from "./data/data.json"; function App( ) { return ( <Router> <PreNavbar /> <Navbar /> <Slider start = {banner.start} /> </Router> ); } export default App;

Here is the Slider component:

import React from 'react'; import Carousel from 'react-bootstrap/Carousel'; const Slider = ({start}) => { return ( <Carousel> {start.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider;

If i use {} in banner export, like so:

import {banner} from "./data/data.json";

I face this other error:

ERROR in ./src/App.js
Should not import the named export 'banner'.'start' (imported as 'banner') from default-exporting module (only default export is available soon)

how is Slider function called? it needs to be with an object that has a property called start, that is an array - also, please edit the question to make the code readable (the {} button is good for that) ... and don't over use bold and headings like that — Bravo
– Bravo, Commented Feb 26, 2022 at 7:08
the second error ... perhaps do something like import data from "./data/data.json"; const {banner} = data; - but without seeing your data.json that's pure speculation — Bravo
– Bravo, Commented Feb 26, 2022 at 7:12
Thank you for responding and Ya from the next time i will post my question like more read able as you say sir. — Nayan Biswas
– Nayan Biswas, Commented Feb 26, 2022 at 7:18
oops out put console show me like.......Uncaught TypeError: start is undefined — Nayan Biswas
– Nayan Biswas, Commented Feb 26, 2022 at 7:26

Cristhyan De Marchena · Accepted Answer · 2022-02-26 07:20:10Z

Try passing a default value to your start prop on the <Slider /> component such as:

import React from 'react' import Carousel from 'react-bootstrap/Carousel' const Slider = ({start = []}) => { return ( <Carousel> {start.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' key={item} src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider;

Or you can add optional chaining like:

import React from 'react' import Carousel from 'react-bootstrap/Carousel' const Slider = ({start}) => { return ( <Carousel> {start?.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' key={item} src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider;

Or both:

import React from 'react' import Carousel from 'react-bootstrap/Carousel' const Slider = ({start = []}) => { return ( <Carousel> {start?.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' key={item} src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider;

I think the latter is the best approach to solving this issue. This may be happening because the app is still loading the JSON file data and when you are mounting the component, and since it expects the start prop to be loaded from the start, instead of being an undefined or null value, it throws an error.

Collectives™ on Stack Overflow

Invalid JSON import in React

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related