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
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"
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>`
)
}
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>
)
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
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)