Parsing error: Unexpected token, expected "," in react js [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed last month.
Improve this question
import { React,Fragment } from 'react'
import classes from 'Modal.module.css';
const Backdrop = (props) = {
return <div className={classes.backdrop} />
};
const ModalOverlay = props = {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.childern}</div>
</div>
);
};
const poratalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop/>, poratalElement)}
{ReactDOM.createPortal(<ModalOverlay>{props.children}</ModalOverlay>, poratalElement)}
</Fragment>
)
}
export default Modal
Whythis error occur and what is the solution for this. I am trying to use the both the compontent backdrop and Modaloverlay in my main compontent Modal.

Related

Display: Flex; is not making the pictures be side by side [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 12 days ago.
Improve this question
When I start the react app it doesn't show the pictures side by side -
My Row.js file -
import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css';
const base_url = "https://image.tmdb.org/t/p/original/";
function Row({ title, fetchUrl }) {
const [movies, setMovies] = useState([]);
useEffect(() => {
async function fetchData() {
const request = await axios.get(fetchUrl);
setMovies(request.data.results);
return request;
}
fetchData();
}, [fetchUrl]);
console.table(movies);
return (
<div className="row">
<h2>{title}</h2>
<div classname="row_posters">
{/* several row_poster(s) */}
{movies.map(movie => (
<img
className="row_poster"
src={`${base_url}${movie.poster_path}`}
alt={movie.name}
/>
))}
</div>
</div>
);
}
export default Row
My Row.css file -
.row_posters {
display: flex
}
.row_poster {
object-fit: contain;
width: 100%;
max-height: 100px;
margin-right: 10px;
transition: transform 450ms;
}
It only shows the pictures going down and not by side. I have provided a picture below on what it shows right now. I want the pictures to go side by side but its showing straight down only.
In react we provide className like this not like classname...
classname="row_posters" should replace by className="row_posters"

How to do router.push() on onScroll event in NEXT 13 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 days ago.
This post was edited and submitted for review 6 days ago.
Improve this question
export default function Home() {
const router = useRouter()
const handleScroll = (e) => {
e.preventDefault()
router.push("./SecondPage")
}
return (
<div className={styles.container} onScroll={handleScroll}\>
...
</div>`
)
}
This is my homepage (page.jsx) and I wanna change pages onScroll down event
Try this code
And if you are using latest version of react then try to use useNavigate instead of useRouter
export default function Home() {
const router = useRouter()
React.useEffect(() => {
window.addEventListener("handleScroll", handleScroll);
}, []);
const handleScroll = (e) => {
e.preventDefault()
router.push("./SecondPage")
}
return (
<div className={styles.container} onScroll={handleScroll}\>
...
</div>`
)
}

Why is there no output when I try mapping an array? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 months ago.
Improve this question
So im creating a webpage that utilizes the REST Countries API. I have a useEffect that renders on the first run and store the data into a useState array but when I try mapping it in the body for some reason my ternary operator returns null saying that there is no data in my useState variable. Am I using the ternary operator right? I want to find out why my variable is null when there is clearly data in the variable
code:
const LightMode = () => {
const [data, setData] = useState([])
useEffect(() =>{
axios.get('https://restcountries.com/v3.1/all').then(res=>{
let toInsert = res.data.map((country) =>({
name: country.name.common,
population: country.population,
region: country.region,
capital: country.capital,
image: country.coatOfArms.png
}))
setData((prev) => [...prev, ...toInsert])
})
}, [])
console.log(data)
return(
<div>
<NavigationBar />
<div className='temp'>
{data ? data.map((country) =>{
<div>
country.name
</div>
}) : null}
</div>
</div>
)
}
export default LightMode;
You are not returning anything in your map. You either need to remove the {} or add a return statement. Here I replaced the {} with () to auto return your JSX. You will also want to add {} around the country.name to make that javascript.
return(
<div>
<NavigationBar />
<div className='temp'>
{data ? data.map((country) =>(
<div>
{country.name}
</div>
)) : null}
</div>
</div>
)

CKEditor data does not upload in firestore with TypeError: text is not a function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I keep on having this error with these codes:
TypeError: text is not a function
const [text, setText] = useState("");
handlesubmit:
const handleSubmit = (e) => {
e.preventDefault();
try {
const userRef = firestore.collection("announcement").doc();
const ref = userRef.set({
text,
});
text("");
console.log(" saved");
} catch (err) {
console.log(err);
}
};
inside the return of the functional component:
<form onSubmit={handleSubmit}>
<CKEditor
editor={ClassicEditor}
data={text}
onChange={(event, editor1) => {
const data = editor1.getData();
setText(data);
}}
/>
<br />
<br />
<ButtonForm type="submit">Submit</ButtonForm>
</form>
Use setText("") instead text(""); on handleSubmit

TypeError: Cannot read property 'map' of undefined in react with UseState [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
So I am coding this app in react that allows you to add filters to an image, I am getting the error "TypeError: Cannot read property 'map' of undefined" I am using a functional component with UseState. The default options are the filters. This is App.js
import React, { useState } from 'react'
import './App.css';
import Slider from './Slider'
import SidebarItem from './SidebarItem'
const DEFAULT_OPTIONS = [
{
name: 'Brightness',
property: 'brightness',
value: 100,
range: {
min: 0,
max: 200
},
unit: '%'
},
{
name: 'Contrast',
property: 'contrast',
value: 100,
range: {
min: 0,
max: 200
},
unit: '%'
},
//...
]
function App() {
const { options, setOptions } = useState(DEFAULT_OPTIONS)
return (
<div className="container">
<div className="main-image" />
<div className="sidebar">
{options.map((option, index) => {
return (
<SidebarItem
key={index}
name={option.name}
/>
)
})}
</div>
<Slider />
</div>
)
}
export default App;
It's not curly braces when using useState. It's an array
const [ options, setOptions ] = useState(DEFAULT_OPTIONS)

Categories

Resources