I have a snippet within a React component similar to this:
<div>
{items.map((item) => {
const [isExpanded, setIsExpanded] = useState(false)
return (
// ...
)
})}
</div>
I am calling useState in a map method, but I read in the documentation that hooks must be top level. I am wondering how could I refactor this code to avoid doing it?
option 1
In your case i would suggest creating a new component for the item.
<div>
{ items.map((item) => <Item key={} />) }
</div>
...
const Item = () => {
const [isExpanded, setIsExpanded] = useState(false)
return (
// ...
)}
}
option 2
const [expandedIds, setExpandedIds] = useState([])
...
<div>
{items.map((item) => {
const expanded = checkIsExpended(item)
return (
// ...
)
})}
</div>
Related
I would like to pull the const ChatLog out of the main function Chats and insert it as a component or outside of the Chats function for now. The Problem is that the ChatLog needs the useState variables [msg, sendMsg] (..) that are called in the Chats function. How could I do this anyway? Am new to react.
function Chats() {
const [msg, sendMsg] = useState("");
const [msgs1, sendMsgAll] = useState([]);
useEffect(() => {
onValue(ref(database), (snapshot) => {
sendMsgAll([]);
const data = snapshot.val();
if (data !== null) {
Object.values(data).map((msg) => {
sendMsgAll((oldArray) => [...oldArray, msg]);
});
}
});
}, [])
const ChatLog = () => {
return (
<div>
{msgs1.map((msg) => (
<div className="chat-log">
<p align = {checkSide(msg.usr)}>
<h2>{msg.msg}</h2>
<h4>User: {msg.usr}</h4>
<h4>Time: {convertUnix(msg.time)}</h4>
<button>update</button>
<button>delete</button>
</p>
</div>
))}
</div>
)
}
return (
<div className="ChatView">
<p><ChatLog /></p>
<p>{ChatInput()}</p>
</div>
)
};
You can add props to ChatLog component. Check this...
const ChatLog = (props) => {
const {msg1} = props
return (
<div>
{msgs1.map((msg) => (
<div className="chat-log">
<p align = {checkSide(msg.usr)}>
<h2>{msg.msg}</h2>
<h4>User: {msg.usr}</h4>
<h4>Time: {convertUnix(msg.time)}</h4>
<button>update</button>
<button>delete</button>
</p>
</div>
))}
</div>
)
}
However,you need add props to component when you use it. Something like this...
return (
<div className="ChatView">
<p><ChatLog msg1={msg1} /></p>
<p>{ChatInput()}</p>
</div>
)
One more thing, when you declaring a component, it has to be declared of another component. Like this
//this is ChatLog component
const ChatLog = (props)=>{
return <div/>
}
//this is Chats component
const Chats = ()=>{
return (
<div>
<ChatLog {...props}/>
</div>
)
}
I have a list of items, each of which is represented by a component and supports a couple of actions such as "Like", "Save", I have 2 options: one is to keep the handlers in list(Parent) component and pass the handlers to each item component or I can have the handlers in the item component, the code may look like below, I am wondering which one is better, Thanks!
Solution 1:
const ItemComp = ({item, onLike, onSave}) => {
return (
<>
<p>{item.name}</p>
<div>
<button onClick={() => onLike(item.id)}>Like</button>
<button onClick={() => onSave(item.id)}>Save</button>
</div>
</>
)
}
const ListComp = ({items}) => {
const handleLike = (id) => {
console.log(id)
// like it
}
const handleSave = (id) => {
console.log(id)
// save it
}
return (
{items.map(
(item) => {
return <ItemComp item={item} onLike={handleLike} onSave={handleSave} >
}
)}
)
}
<List items={items} />
Solution 2:
const ItemComp = ({item}) => {
// keep event handlers inside of child component
const handleLike = (id) => {
console.log(id)
// like it
}
const handleSave = (id) => {
console.log(id)
// save it
}
return (
<>
<p>{item.name}</p>
<div>
<button onClick={() => handleLike(item.id)}>Like</button>
<button onClick={() => handleSave(item.id)}>Save</button>
</div>
</>
)
}
const ListComp = ({items}) => {
return (
{items.map(
(item) => {
return <ItemComp item={item} >
}
)}
)
}
<List items={items} />
if you are going to use the component in the same context throughout the whole app, or write an explanatory document for your components, its better if the handlers are inside. Otherwise, you would have to write new handlers for each time you use the component.
Think of it as a UI Library. Pass the data, see the result :)
BUT,
if you are going to use the component as a general, container kind of component, you'll have to write the handlers outside, because the component's own handlers wouldn't know how to handle the different kind of data if you introduce new contexts for it.
My Onclick on bestmovies map does not work. If I place it on a H1, for example, works. onClick={handleClickMovie}
// imports....
const Movies = () => {
const [popularMovies, setPopularMovies] = useState([])
const [bestMovies, setBestMovies] = useState([])
const [showPopUp, setShowPopUp] = useState(false)
const handleClickMovie = () => {
setShowPopUp(console.log('Clicked'))
}
useEffect(() => {
async function getMovies() {
const responsePopularMovies = await getPopularMovies()
setPopularMovies(responsePopularMovies.results)
const responseBestMovies = await getBestMovies()
setBestMovies(responseBestMovies.results)
}
getMovies()
}, [])
return (
<div>
<Wrapper>
{showPopUp ? <MoviePopUp /> : null}
<h1>Filmes Populares</h1>
<Content>
{popularMovies.map(item => (
<MovieItem movie={item} />
))}
</Content>
<h1>Filmes Bem Avaliados</h1>
<Content>
{bestMovies.map(item => (
<MovieItem movie={item} onClick={handleClickMovie} />
))}
</Content>
</Wrapper>
</div>
)
}
export default Movies
MovieItem.js
import React from 'react'
import { Cover, Score, Title } from './MovieItem.styles'
const MovieItems = ({ movie }) => {
return (
<Cover key={movie.id}>
<img
src={`https://image.tmdb.org/t/p/original${movie.poster_path}`}
alt="capas"
/>
<Score>{movie.vote_average}</Score>
<Title>{movie.title}</Title>
</Cover>
)
}
export default MovieItems
try wrapping in a div
<Content>
{bestMovies.map(item => (
<div onClick={handleClickMovie}>
<MovieItem movie={item} onClick={handleClickMovie} />
</div>
))}
</Content>
As #anthony_718 answered, you are calling onClick on a JSX component. JSX components aren't in the DOM and don't have click events (although they can render HTML elements if they contain them).
If you want, you can also pass the props all the way up to an actual html element the <Cover> renders.
#anthony_718's answer is correct.
The reason it didn't work it's because <MovieItem> doesn't have onClick in his props.
However, to facilitate reusability, you can modify your component like so:
const MovieItems = ({ movie, onClick }) => {
return (
<div onClick={onClick}>
<Cover key={movie.id}>
// ... rest of your stuff
</Cover>
</div>
)
}
export default MovieItems
It's essentially the same solution, but by placing <div onClick> within the component definition, you make it more reusable than the other option.
check this
bestMovies.map((item, i) => { return( <MovieItem movie={item} onClick={handleClickMovie} /> )})
Using React, i have a list of ref statically declared this way:
let line1 = useRef(null);
let line2 = useRef(null);
let line3 = useRef(null);
...
//IN MY RENDER PART
<li ref={(el) => (line1 = el)}>line1</li>
<li ref={(el) => (line2 = el)}>line1</li>
<li ref={(el) => (line3 = el)}>line1</li>
the refs are then passed to an animation function and everything works correctly;
now things changed a bit and i create the list item using map and im no longer able to ref the element correctly;
i tried something like:
{menu.menu.map((D) => {
let newRef = createRef();
LiRefs.push(newRef);
return (
<li
key={D.id}
ref={(el) => (newRef = el)} >
{D.label}
</li>
);
})}
but the array i pass to the animation function is empty (i guess because the function is called inside useEffect hook and LiRefs is not yet a useRef)
i also know the number of i will create, so i can declare them at the beginning and the reference with something like
ref={(el) => (`line${i}` = el)}
which is not working
any other solution i could try?
Issue
This won't work as each render when menu is mapped it creates new react refs.
Solution
Use a ref to hold an array of generated refs, and assign them when mapping.
const lineRefs = React.useRef([]);
lineRefs.current = menu.menu.map((_, i) => lineRefs.current[i] ?? createRef());
later when mapping UI, attach the react ref stored in lineRefs at index i
{menu.menu.map((D, i) => {
return (
<li
key={D.id}
ref={lineRefs.current[i]} // <-- attach stored ref
{D.label}
</li>
);
})}
Mine is React Hooks version.
useMemo to create an array of refs for performance sake.
const vars = ['a', 'b'];
const childRefs = React.useMemo(
() => vars.map(()=> React.createRef()),
[vars.join(',')]
);
React will mount each ref to childRefs
{vars.map((v, i) => {
return (
<div>
<Child v={v} ref={childRefs[i]} />
<button onClick={() => showAlert(i)}> click {i}</button>
</div>
)
})
}
Here is a workable demo, hope that helps. ^_^
const Child = React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
showAlert() {
window.alert("Alert from Child: " + props.v);
}
}));
return <h1>Hi, {props.v}</h1>;
});
const App = () => {
const vars = ['a', 'b'];
const childRefs = React.useMemo(
() => vars.map(()=> React.createRef()),
// maybe vars.length
[vars.join(',')]
);
function showAlert(index) {
childRefs[index].current.showAlert();
}
return (
<div>
{
vars.map((v, i) => {
return (
<div>
<Child v={v} ref={childRefs[i]} />
<button onClick={() => showAlert(i)}> click {i}</button>
</div>
)
})
}
</div>
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,
rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
There may be some Typescript inconsistencies and complexity in other answers. So I think the best way to use the useRef hook in a loop is:
// Declaration
const myRef = useRef([]);
myRef.current = [];
const addToRefs: (el) => void = (el) => {
if (el && !myRef.current.includes(el)) {
myRef.current.push(el);
}
};
And
// Assignment (input element example)
...
...
{anyArrayForLoop.map((item, index) => {
return (
<input
key={index}
ref={addToRefs}
/>
);
})}
...
...
Final:
// The Data
myRef.current
Instead of storing refs in an array, you could create a ref for each component within the loop.
You can also access that ref in the parent component by a function.
You could do something similar to this.
const { useRef, useState } = React;
const someArrayToMapStuff = ["a", "b", "c"];
const ListWithRef = ({ text, setDisplayWhatsInsideRef }) => {
const ref = React.useRef(null);
const logAndDisplayInnerHTML = () => {
setDisplayWhatsInsideRef(ref.current.innerHTML);
console.log(ref.current);
};
return (
<li
ref={ref}
onClick={logAndDisplayInnerHTML}
>
<button>{text}</button>
</li>
);
};
const App = () => {
const [displayWhatsInsideRef, setDisplayWhatsInsideRef] = useState("");
return (
<ul>
{someArrayToMapStuff.map(thing => <ListWithRef
key={thing}
text={thing}
setDisplayWhatsInsideRef={setDisplayWhatsInsideRef}
/>)}
{displayWhatsInsideRef && (
<h1>Look, I'm a ref displaying innerHTML: {displayWhatsInsideRef}</h1>
)}
</ul>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(<App />);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
Hopefully this helps someone.
I'm trying to create an animated timeline on react with a map function and intersection observer so each part of the timeline loads sequentially.
I'm having trouble with the refs as I believe the ref only links to the last item on the map? I have had a look around and can't seem to find anything.
Here is my code:
import dataxp from '../Data/data-xp'
import TimelineItem from './TimelineItem'
function useOnScreen(options) {
const ref = React.createRef()
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
setVisible(entry.isIntersecting);
}, options);
if (ref.current) {
observer.observe(ref.current)
}
return () => {
if (ref.current) {
observer.unobserve(ref.current)
}
}
}, [ref, options])
return [ref, visible]
}
function Timeline() {
const [ref, visible] = useOnScreen({rootMargin: '-500px'})
return (
dataxp.length > 0 && (
<div className='timeline-container'>
<div className='title-container'>
<h1 className='xp-title'>EXPERIENCE</h1>
</div>
{visible ? (dataxp.map((data, i) => (
<TimelineItem data={data} key={i} ref={ref}/>
)
)) : (
<div style={{minHeight: '30px'}}></div>)}
<div className='circle-container'>
<div className='end-circle'> </div>
</div>
</div>
)
)
}
export default Timeline