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"
Related
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 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.
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 needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want a border around the picture when I select it. So if I have 6 pictures and choose 3, I would like to have highlighted borders around those images. Question is,How can I do this? EDIT: I am using React for this dilemma.
This depends on how you want to track state in your app.. here is an example which tracks the state in the parent component. Essentially you have a single parent App component which tracks the state for each image, and then an Image component which renders either with or without a border, depending on a piece of the App state which gets passed down as a prop. Refer to the code to see what I mean. An alternative would be to have the active state live within each Image component itself.
The code has a number of interesting features mainly due to leveraging several aspects of ES6 to be more concise, as well as React's immutability helper to help update the state array in an immutable way, and lodash's times method to assist in creating our initial state array.
Code (some of the indenting got a bit muddled in the copy from jsfiddle..):
function getImage() {
return { active: false };
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { images: _.times(6, getImage) };
this.clickImage = this.clickImage.bind(this);
}
clickImage(ix) {
const images = React.addons.update(this.state.images, {
[ix]: { $apply: x => ({ active: !x.active}) }
})
this.setState({ images });
}
render() {
const { images } = this.state;
return (
<div>
{ images.map((image, ix) =>
<Image
key={ix}
ix={ix}
active={image.active}
clickImage={this.clickImage} />) }
</div>
);
}
};
class Image extends React.Component {
render() {
const { ix, clickImage, active } = this.props;
const style = active ? { border: '1px solid #021a40' } : {};
return <img
style={style}
src={`https://robohash.org/${ix}`}
onClick={() => clickImage(ix)}/>;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
And then what it looks like:
Just add an event handler for click that adds a "selected" class, then set that selected class to have a border in css.
.selectableImg {
border: solid 1px transparent;
margin: 10px;
}
.selectableImg.selected {
border: solid 1px blue;
}
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<script>
var images = document.querySelectorAll(".selectableImg");
images.forEach(function(i) {i.addEventListener("click", function(event) {
i.classList.toggle("selected");
})});
</script>