We Keep Coding

How do I show data on one card when hovering and not on all?

Okay there is definitely a quick solution for this I just can't figure out.
Just a description of what I am trying to do:
Whenever I hover over a certain card, I would like to see the description of that item and only that item. But instead what's obviously happening, as you can see from my code, is every single cards description is showing.
I rewrote a simpler version of the code by taking out any unnecessary pieces. Everything is imported correctly, styling and classNames were removed as well.
export function Items() {
const [items, setItems] = useState([])
const [isHovering, setIsHovering] = useState(false)
useEffect(() => {
setItems(Data)
}, [])
function handleMouseOver() {
setIsHovering(true)
}
function handleMouseOut() {
setIsHovering(false)
}
return(
<div>
{items.map(item => {
return(
<Card onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} key={item.id}>
{isHovering ?
<Card.Body>
<p>{item.item_description}</p>
</Card.Body>
:
<Card.Body>
</Card.Body>
}
<Card.Footer>
</Card.Footer>
</Card>
)
})}
</div>
)
}

As far as I can see you don't need to put this logic into parent component, and also it makes everything more complex, since it's hard to manage hovering. I would create new chlid component and manage this state out there internally.
export function Item({item}) {
const [isHovering, setIsHovering] = useState(false);
useEffect(() => {
setItems(Data);
}, []);
function handleMouseOver() {
setIsHovering(true);
}
function handleMouseOut() {
setIsHovering(false);
}
return (
<Card onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
{isHovering ? (
<Card.Body>
<p>{item.item_description}</p>
</Card.Body>
) : (
<Card.Body></Card.Body>
)}
<Card.Footer></Card.Footer>
</Card>
);
}
export function Items() {
const [items, setItems] = useState([]);
return (
<div>
{items.map(item => (
<Item key={item.id} item={item} />
))}
</div>
);
}

Your "isHovering" state should also be an array, where you store the hover state for every card. Then on hover set "isHovering" to true only for the right card.

How to pass a function to a different screen

I have 2 screens that I need to share a function ie
//ScreenOne.js
import ScreenTwo from "./ScreenTwo"
...{...
function handlePress(){
Alert.alert(
"",
"Clicked",
[{text: "ok", onPress: ()=>null}]
)
}
return(
<>
<FlatList
data={source}
renderItem={({ item }) => <ScreenTwo item={item} />} />
<Button onPress={handlePress}/>
</>
)
...}...
//ScreenTwo.js
...{...
return(
<>
<Text>{...}</Text>
<Button onPress={handlePress}/>)
</>
...}...
I'm working with functional components. Most of the materials I read only talk of passing data and not methods/functions to other screens. Using this example how can I call the handlePress from ScreenOne to Two...

I'm assuming you are talking about sharing the handlePress function.
You can pass a function in the props:
<ScreenTwo item={item} handlePress={handlePress}/>
And then use it in ScreenTwo
const ScreenTwo = ({handlePress, ...rest}) => {
...
<Button onPress={handlePress}/>)
...
}

Passing data through props and then setting to state becomes undefined?

On page load I'm getting the weather data for an api and then displaying it on sidebar then when you click on a city it shows the the city's weather in more detail. So basically I've been passing the data around from parent to child with props. I need to fill the detailed component with some initial data so I'm trying to send the first object in the data array to the child component through props and set it to state but when I try to render it is undefined and I'm not sure why.
It actually seems to be coming back undefined a couple times before setting it but when I try to render it on the page {weather.data.temp} I get 'Cannot read property 'temp' of undefined'.
Parent:
const fetchCity = async (city) => {
const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`);
return {
description: res.data.weather[0].description,
icon: res.data.weather[0].icon,
temp: res.data.main.temp,
city: res.data.name,
country: res.data.sys.country,
id: res.data.id,
};
};
function App() {
const [data, setData] = useState([]);
const [activeWeather, setActiveWeather] = useState([]);
useEffect(() => {
const fetchCities = async () => {
const citiesData = await Promise.all(["Ottawa", "Toronto", "Vancouver", "California", "London"].map(fetchCity)).catch((err) => {
console.log(err);
});
setData((prevState) => prevState.concat(citiesData));
};
fetchCities();
}, []);
const handleClick = (event) => {
const weather = JSON.parse(event.target.dataset.value);
setActiveWeather(weather);
};
return (
<div className="App">
<Header />
<Container>
<Row>
<Col>
<WeatherPanel data={data} handleClick={handleClick} />
</Col>
<Col>
<ActiveWeather activeWeather={activeWeather} data={data[0]} />
</Col>
</Row>
</Container>
</div>
);
}
export default App;
Child
import React, { useEffect, useState } from "react";
import { Container, Card } from "react-bootstrap";
const ActiveWeather = (props) => {
const [weather, setWeather] = useState();
useEffect(() => {
setWeather(props.data);
}, [props]);
console.log(weather);
return (
<Container>
<Card>
<Card.Header> </Card.Header>
{weather.temp}
</Card>
</Container>
);
};
export default ActiveWeather;
Other child
const WeatherPanel = (props) => {
return (
<div>
<Container fluid>
<Card style={{ boxShadow: "0 0 10px 2px lightgrey" }}>
<Card.Header> Favorite Location</Card.Header>
<ListGroup variant="flush">
<ListGroup.Item>
{props.data.map((item) => (
<ListGroup.Item key={item.id} data-value={JSON.stringify(item)} onClick={props.handleClick}>
<img src={`http://openweathermap.org/img/wn/${item.icon}#2x.png`} alt="Weather Icon" />
{item.city + ", " + item.country}
</ListGroup.Item>
))}
</ListGroup.Item>
</ListGroup>
</Card>
</Container>
</div>
);
};
export default WeatherPanel;

Issue
Calling setState does not update the state variable immediately. Why?
Solution
Check if weather is defined before accessing it.
Option 1: Use weather?.temp
Option 2: Use an if statement: if (!weather)

I think the issue is with your useEffect in the ActiveWeather component.
Because you are passing just props as the dependancy of your useEffect, any prop change will trigger it. So in your example activeWeather is probably triggering it, and you are then setting the state of weather to undefined because at mount stage, there isn't any data to pass in.
If you limit the dependence to only props.data. Then that useEffect will only run if something gets passed though the data prop. You can even use an if statement in there to double check that there is actually some data.
useEffect(() => {
if(props.data){
setWeather(props.data);
}
}, [props.data]);
In your parent component you are also passing in data[0] as the data prop. On mount, data is an empty array so if you say data[0] it will be undefined. Maybe wrap the rendering of your ActiveWeather component in an if to check if there is any data
<Col>
{ data.length > 0 && <ActiveWeather activeWeather={activeWeather} data={data[0]} /> }
</Col>

Trying to iterate over a JSON object in React

I am trying to display a toggle checkbox for every JSON value I have. This is what the json object looks like for element
{
"sourceIP": {
"Primary": ["237.100.100.3", "238.0.4.8"],
"Secondary": ["237.0.1.178", "237.1.1.91"]
},
"multicastIP": {
"Primary": ["10.208.153.129", "238.0.4.8"],
"Secondary": ["10.208.133.58", "238.0.4.8"]
}
}
So I would like to iterate through element instead of hardcoding it like this:
const CustomToggle = ({ element}) => (
<List divided verticalAlign='middle'>
<Segment textAlign='left' style={{paddingLeft: '7.5em'}}>
<Checkbox
toggle
label={(JSON.stringify(element.sourceIP.Primary[0]))}
value={(JSON.stringify(element.sourceIP.Primary[0]))}
/>
<Checkbox
toggle
label={(JSON.stringify(element.sourceIP.Primary[1]))}
value={(JSON.stringify(element.sourceIP.Primary[1]))}
/>
<Checkbox
toggle
label={(JSON.stringify(element.sourceIP.Secondary[1]))}
value={(JSON.stringify(element.sourceIP.Secondary[1]))}
/>
</Segment>
</List>
);
I have been trying to forEach and .map but none of this seems to work. I don't want to have to hardcode every json value in element. How can I just iterate through my element JSON object?

Object.keys(element).reduce((a,c) => a.concat(...Object.values(element[c])),[])
this transformed data gives array of ip adtresses. So, now you can iterate it
const CustomToggle = ({ element}) => {
const elements = Object.keys(element).reduce((a,c) => a.concat(...Object.values(element[c])),[]);
return (
<List divided verticalAlign='middle'>
<Segment textAlign='left' style={{paddingLeft: '7.5em'}}>
{elements.map(ip => <Checkbox toggle label={ip} value={ip} />}
</Segment>
</List>
)
}

Here try this, let me know if it helps :)
const CustomToggle = ({ element }) => (
<List divided verticalAlign="middle">
<Segment textAlign="left" style={{ paddingLeft: "7.5em" }}>
{Object.keys(element).map(key => {
return [...element[key].Primary, ...element[key].Secondary].map(x => {
<Checkbox toggle label={x} value={x} />;
});
})}
</Segment>
</List>
);

You can for example do something like the snipped below:
const List = ({ divided, rest }) => <div {...rest} />;
const Checkbox = ({ toggle, ...props }) => (
<div>
<input type="checkbox" {...props} />
<label>{props.label}</label>
</div>
);
const Segment = (props) => <div {...props} />;
const CustomToggle = ({ element }) => (
<div>
{element.map((ip) => (
<Checkbox toggle label={ip} value={ip} />
))}
</div>
);
function App() {
let result = `{
"sourceIP": {
"Primary": ["237.100.100.3", "238.0.4.8"],
"Secondary": ["237.0.1.178", "237.1.1.91"]
},
"multicastIP": {
"Primary": ["10.208.153.129", "238.0.4.8"],
"Secondary": ["10.208.133.58", "238.0.4.8"]
}
}`;
let data = JSON.parse(result);
let ips = [];
Object.keys(data).map((source) => {
Object.keys(data[source]).map((type) => {
ips.push(...data[source][type]);
});
});
return <CustomToggle element={ips} />;
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
So, you'll parse the data, then iterate over it to get the IPs and then pass those as a prop to the CustomToggle. The code above is just an example to get you going as I don't know what your List, Checkbox and Segment components look like.
The reasoning is that CustomToggle should not know or care what the data should look like, it just knows how to render a custom toggle based on some string that it receives, in this case the ip. You should however make sure that each Checkbox has a unique key.

How do I compose a better React list container component?

I have a small app fetching Movies. The component tree isn't very deep. I have state in App.js and it passes data to the Movies.js component. Now, Movies.js is just a container to render the ul list of Movies.
App.js passing data to Movies
<Movies
modalData={this.state.modalData}
toggleModal={this.openModal}
isOpen={this.state.modalIsOpen}
closeModal={this.closeModal}
items={this.state.data}
getMovieInfo={this.getMovieInfo}
addToFavorites={this.addToFavorites}
/>
Movies.js
const Movies = props => {
const { items, getMovieInfo, addToFavorites, isOpen, toggleModal, closeModal, modalData } = props;
const listItems = items.map((item, id) => (
<Movie
key={id}
id={id}
imdbID={item.imdbID}
title={item.Title}
poster={item.Poster}
getMovieInfo={getMovieInfo}
addToFavorites={addToFavorites}
imdbid={item.imdbID}
isOpen={isOpen}
toggleModal={toggleModal}
closeModal={closeModal}
modalData={modalData}
/>
));
return <ul id="movie-container">{listItems}</ul>;
};
and finally Movies.js which is just an item that is rendered in the Movie component. I tried using destructuring to keep the items prop for the Movies component because it needs that to map over and then ...props to Movie. I cant seem to make this work.
My app works fine but this is 'prop-drilling' and I think context may not be appropriate because this is not a deep tree. Higher Order Components, I don't understand yet. What can I do to make this better?
Movie.js
const Movie = props => {
const {
id,
imdbID,
title,
poster,
getMovieInfo,
addToFavorites,
isOpen,
toggleModal,
closeModal,
modalData,
} = props;
return (
<React.Fragment>
<li className="movie" id={id}>
<img srcSet={poster} alt={title} imdbid={imdbID} />
<div className="movie-title">{title}</div>
<div className="button-container">
<button
type="submit"
className="button-small"
onClick={toggleModal}
imdbid={imdbID}
title={title}
id={id}>
{' '}
Info!!
</button>
<button
type="submit"
className="button-small"
onClick={addToFavorites}
imdbid={imdbID}
id={id}>
{' '}
Fav
</button>
</div>
</li>
<Modal className="modal" selector="#modal-root" isOpen={isOpen} onClick={closeModal}>
<div className="modal-1">

You can do like:
const Movies = ({ items, ...other}) => {
<Movie {...other} />
Or,
const { items, ...other } = props
<Movie {...other} />
Your code in example:
const Movies = ({ items, ...other}) => {
const listItems = items.map((item, id) => (
<Movie
key={id}
id={id}
{...other}
/>
));
return <ul id="movie-container">{listItems}</ul>;
};
Your update made me afraid. You need to destructure all otherwise it will go even longer like id={other.id}. If you feel it's good rather, then do:
const { items, ...other } = props
// now when you use other props like imdbid
imdbid={other.imdbid}