I am using react context, and all it contains at the moment are 3 items: contacts and editingContact, and editContact:
interface ContactsContextProps {
contacts: Contact[];
editingContact: Contact;
editContact: (contact: Contact) => () => void // being lazy and this is from an onClick
}
const ContactsContext = React.createContext<Partial<ContactsContextProps>>({
editContact: (contact: Contact) => () => {}
})
const ContactsProvider: React.FunctionComponent = props => {
const [contacts, setContacts] = useState<Contact[]>();
const [editingContact, setEditingContact] = useState<Contact>();
React.useEffect(() => {
// fetch contacts, and setContacts(contacts)
}, [])
const editContact = React.useCallback((contact: Contact) => {
return function() {
setEditingContact(contact);
}
})
return (
<ContactsContext.Provider
value={{
editingContact,
editContact,
contacts
}}
>
{props.children}
</ContactsContext.Provider>
)
}
Here's how it is being used:
const ContactsList: React.FunctionComponent<{
contacts: Contact[];
}> = React.memo(props => {
return (
<>
{props.contacts.map(contact => (
<Card key={contact.id} contact={contact} />
))}
</>
);
});
const Wrapper: React.FunctionComponent = () => {
const contactsCtx = React.useContext(ContactsContext);
return (
<>
<Box className={styles.main}>
<Header />
{contactsCtx.contacts && <ContactsList contacts={contactsCtx.contacts} />}
</Box>
{contactsCtx.editingContact && <EditContactModal />}
</>
);
};
The <Card /> only has an edit button right now, which calls contactsContext.editContact(). However, each time this is called, all the Cards re-render. I placed a console.log('card') in each Card, and it logs card 10 times (I have 10 contacts right now).
What am I doing wrong?
There has been a discussion in a React Github issue, basically there is 3 possible solutions for this:
Option 1 (Preferred): Split contexts that don't change together
Option 2: Split your component in two, put memo in between
Option 3: One component with useMemo inside
You should check the link for examples about it.
Related
I have a default component Collection which uses a sub-component called RenderCollectionPieces to display UI elements. I can't figure out why I am able to see the data for image.name in the console but not able to see the UI elements display.
Additional information:
There are no errors in the console
If I replace <p>{image.name}</p> with <p>TESTING</p>, still nothing shows.
columnOrg is a list of lists
each list in columnOrg is a list of maps with some attributes
Index.js:
const RenderCollectionPieces = () => {
const {collectionId} = useParams();
let listOfImageObjects = collectionMap[collectionId];
let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
let columnOrg = [];
while (columnOrg.length < 4){
if(imagesPerColumn > listOfImageObjects.length){
imagesPerColumn = listOfImageObjects.length;
}
columnOrg.push(listOfImageObjects.splice(0,imagesPerColumn))
}
let collectionList = columnOrg.map((col) => {
return(
<Grid item sm={3}>
{
col.map((image) => {
console.log(image.name)
return(
<p>{image.name}</p>
)
})
}
</Grid>
)
});
return collectionList;
};
const Collection = ({ match }) => {
const {collectionId} = useParams();
return(
<Box sx={{ background:'white'}}>
<Grid container>
<RenderCollectionPieces />
</Grid>
</Box>
)
};
export default Collection;
I think you are misunderstanding state management in React. Every variable you want to remember inbetween component re-renders should be included in state using useState hook. If you want to perform something initially like your while loop, use it inside useEffect hook.
const MyComponent = () => {
const [myCounter, setMyCounter] = useState(0);
useEffect(() => {
console.log("This will be performed at the start");
}, []);
return (
<Fragment>
<button onClick={() => setMyCounter(myCounter++)} />
You clicked {myCounter} times
</Fragment>
)
}
If you are unfamiliar with useState and useEffect hooks I recommend learning about them first to understand how React manages state and re-renders: https://reactjs.org/docs/hooks-intro.html
Got it to work by using useEffect/useState as recommended by Samuel Oleksak
const RenderCollectionPieces = (props) => {
const [columnOrg, setColumnOrg] = useState([]);
useEffect(() => {
let columnSetup = []
let listOfImageObjects = collectionMap[props.collectionId.collectionId];
let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
while (columnSetup.length < 4){
if(imagesPerColumn > listOfImageObjects.length){
imagesPerColumn = listOfImageObjects.length;
}
columnSetup.push(listOfImageObjects.splice(0,imagesPerColumn))
}
setColumnOrg(columnSetup);
},[]);
return (
columnOrg.map((column) => {
return (
<Grid item sm={3}>
{
column.map((image) => {
return (<img src={image.src} alt={image.name}/>)
})
}
</Grid>
)
})
)
};
I am dispatching an add comment action on a specific post re runs component loop again instead of updating a specific one. Suppose, If I have 100 posts adding comments to one post runs the component loop again and iterates again 100 times. Is there is any way to re-render only a specific item instead of running the whole component loop again?
Here's my code of the looped component
const Post = ({totalComments, like, _id, image, caption}) => {
const {enqueueSnackbar} = useSnackbar();
const dispatch = useDispatch();
const { user } = useSelector((state) => state.loadUser);
const { loading: loadingComments, comments } = useSelector((state) => state.listComments);
const { success: addCommentSucess, error: addCommentError } = useSelector((state) => state.addComment);
const [openComment, setOpenComment] = useState('');
const [commentsLength, setCommentsLength] = useState(totalComments);
//listing of comments
useEffect(() => {
if (addCommentError) {
enqueueSnackbar(addCommentError, {variant: 'error'});
dispatch(clearErrors());
}
}, [addCommentError, addCommentSucess, dispatch, enqueueSnackbar]);
const openCommentHandler = () => {
dispatch(listComments(_id));
setOpenComment(!openComment);
}
const addCommentHandler = (data) => {
console.log('addcomehandle')
dispatch(addComment(data));
setCommentsLength(commentsLength+1);
}
return (
<Card className='post-container'>
<div className='button-wrapper'>
<IconButton onClick={openCommentHandler} color={openComment ? 'primary' : 'default'}>
<SvgIcon component={CommentOutlinedIcon} />
</IconButton>
<p>{commentsLength}</p>
</div>
{!loadingComments && openComment && (
<Comments comments={comments} />
)}
<Divider />
<AddComment onAddComment={addCommentHandler} postId={_id} />
</Card>
);
};
export default Post;
I'm using TypeScript 3.8 with ReactJs, using class-style components, and I'm following an example here: https://stripe.com/docs/stripe-js/react
In these docs, they show the use of the ElementsConsumer as such:
const InjectedCheckoutForm = () => {
return (
<ElementsConsumer>
{({elements, stripe}) => (
<CheckoutForm elements={elements} stripe={stripe} />
)}
</ElementsConsumer>
);
};
This works fine. But I'd like to pass my own prop into the inner like :
<InjectedCheckoutForm backgroundColor={"Green"} />
Does anyone have any suggestions on how to achieve this? I can't tell if I should add a parameter here:
const InjectedCheckoutForm = (backgroundColor: string) => {
return (
....???
Also, does this qualify as a "high order component?" I haven't seen this style of wrapping a component before. The closest thing I've seen is the Redux 'connect' function.
import React, { FC } from 'react';
interface TestInterface {
backgroundColor: string
}
const InjectedCheckoutForm: FC<TestInterface> = props => {
...
const x = props.backgroundColor;
...
return (
<View style={{ 'backgroundColor': x }}>Hello boy<View>
)
}
OR SIMPLE
const InjectedCheckoutForm = ({backgroundColor}) => {
...
const x = backgroundColor
...
}
It took writing this out for me to figure it out. I'm less experienced with functional components, but the key was moving from
const InjectedCheckoutForm = () => {
return (
<ElementsConsumer>
{({ elements, stripe }) => (
<CreditCardForm backgroundColor={???} elements={elements} stripe={stripe} />
)}
</ElementsConsumer>
);
};
to
const InjectedCheckoutForm = (props) => {
return (
<ElementsConsumer>
{({ elements, stripe }) => (
<CreditCardForm backgroundColor={props.backgroundColor} elements={elements} stripe={stripe} />
)}
</ElementsConsumer>
);
};
(Props are wrapped in a single 'props' parameter.)
I hope this is helpful to others who may have had the same question.
I really like react context, but I think it's missing something (or maybe I don't know how to do it)
Say I have a list of todos and it's corresponding provider as
const Home = () => (
<div className="container">
<TodosProvider>
<TodosList />
</TodosProvider>
</div>
)
const TodosList = () => {
const { todos } = useTodos();
return (
<>
{todos.map((todo, idx) => (
<SingleTodo />
))}
</>
)
}
And in another file
import { createContext, useContext, useState } from "react";
const TodosContext = createContext({});
export const TodosProvider = ({ children }) => {
const [todos, setTodos] = useState([{ text: 'a' }, { text: 'b' }, { text: 'c' }])
return (
<TodosContext.Provider value={{ todos }}>
{children}
</TodosContext.Provider>
)
}
export const useTodos = () => {
const todos = useContext(TodosContext)
return todos
}
How can I update a single todo inside the SingleTodo without:
1) Passing the map idx as a property to the SingleTodo and then from SingleTodo call a method of the TodosList provider passing the idx as a parameter
2) Giving an artificial id property to the todo. And then in TodosProvider update the todo that matches with that id.
The reasons for those restrictions are that:
1) Passing down the position of the todo in the rendering as a prop, invalidates the benefits of using context, which is to not have to do prop drilling
2) I don't think it's good to pollute the model with an artificial id just for state management.
I'd like to be able to create a SingleTodoContext and instantiate a SingleTodoProvider in each iteration of the loop
const TodosList = () => {
const { todos } = useTodos();
return (
<>
{todos.map((todo, idx) => (
<SingleTodoProvider key={idx} loadFrom={todo}>
<SingleTodo />
</SingleTodoProvider>
))}
</>
)
}
But that doesn't work because the provider would then need to store the loadFrom property as a state, and that would break the sync between the list todo, and the single todo.
So, how do I update a single item inside a list without prop drilling the position of the item in the list? I don't want to use Redux
You can pass methods for updating the values in context as part of your context. Here is an example based on your code (sort of all crammed together):
import React from "react";
import "./styles.css";
import { createContext, useContext, useState } from "react";
const TodosContext = createContext({});
export const TodosProvider = ({ children }) => {
const [todos, setTodos] = useState([
{ text: "a" },
{ text: "b" },
{ text: "c" }
]);
const selectTodo = (todo, idx) => {
console.log(
"do something with the todo here and then call setTodos, or something else?",
todo.text,
idx
);
// setTodos(prev => /* Do something here to update the list */)
};
return (
<TodosContext.Provider value={{ selectTodo, todos }}>
{children}
</TodosContext.Provider>
);
};
export const useTodos = () => {
const todos = useContext(TodosContext);
return todos;
};
const Home = () => (
<div className="container">
<TodosProvider>
<TodosList />
</TodosProvider>
</div>
);
const SingleTodo = ({ todo, onClick }) => (
<div>
{todo.text} <button onClick={() => onClick(todo)}>Click Me!</button>
</div>
);
const TodosList = () => {
const { selectTodo, todos } = useTodos();
return todos.map((todo, idx) => (
<SingleTodo onClick={todo => selectTodo(todo, idx)} todo={todo} key={idx} />
));
};
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Home />
</div>
);
}
Hope that helps!
I have this prop in one of my components, which I'd like to pass to one other component and use as a variable there:
const VerContinentToolbar = (props) => {
return (
<Menu className="nav-icon">
<CountryList displayFields={["countryName"]} />
</Menu>
);
};
If I console.log(props.props), I get this:
https://imgur.com/a/HnRHDcH
This is the value that I want to pass to useCountries.
The receiving component looks like this:
const useCountries = (props) => {
const [countries, setCountries] = useState([])
useEffect(() => {
firebase
.firestore()
.collection("Africa")
.onSnapshot((snapshot) => {
const newCountries = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setCountries(newCountries)
})
}, [])
return countries
}
const CountryList = ({ displayFields = [] }) => {
const countries = useCountries();
console.log(countries)
return (
<div className="countries">
{countries.map(country => (
<div key={country.id}>
<div className="entry">
{displayFields.includes("continent") && (
<div>Name of continent: {country.continent}</div>
)}
{displayFields.includes("revName") && (
<div>{country.revName}</div>
)}
{displayFields.includes("countryName") && (
<div><Link to={"./Jumbotron"}>{country.countryName}</Link></div>
)}
{displayFields.includes("dest1") && (
<div>Destination 1: {country.dest1}</div>
)}
{displayFields.includes("dest2") && (
<div>Destination 2: {country.dest2}</div>
)}
{displayFields.includes("dest3") && (
<div>Destination 3: {country.dest3}</div>
)}
{displayFields.includes("beerPrice") && (
<div>Beer price: {country.beerPrice}</div>
)}
{displayFields.includes("foodPrice") && (
<div>Food price: {country.foodPrice}</div>
)}
{displayFields.includes("hostelPrice") && (
<div>Hostel price: {country.hostelPrice}</div>
)}
{displayFields.includes("review") && <div>Review: {country.review}</div>}
{displayFields.includes("imgUrl") && <img src={country.url} alt="no-img" />}
</div>
</div>
))}
</div>
);
};
I have tried and tried to understand context, but I cannot really wrap my head around it. I'd like to put the value from props into ".collection("Africa")", but I have no clue how to. I've read the documentation for it, but I'm too thick headed to understand work it out properly.
If there's other solutions, I'm all ears.
What the props that I'd like to pass on is: I've created one component for each continent. In each component, I call the VerContinentToolbar, passing the prop/name of the continent, like this:
const Africa = ({}) => {
return (
<div>
<VerContinentToolbar props={["Africa"]} />
This means, that
const VerContinentToolbar = (props) => {
return (
<Menu className="nav-icon">
<CountryList displayFields={["countryName"]} />
</Menu>
);
};
Holds the word "Africa".
I'd like to pass on "Africa", to my component, which fetches the collection of the continent (in this case: Africa).
I want to pass the information that the prop helds to this:
const useCountries = (props) => {
const [countries, setCountries] = useState([])
useEffect(() => {
firebase
.firestore()
.collection("Africa") <---- I WANT PROP FROM VERCONT HERE
.onSnapshot((snapshot) => {
const newCountries = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setCountries(newCountries)
})
}, [])
return countries
}
To clarify this even more, I've attached two pictures. Asia: Here, I want to render the collection "Asia", to display each review that belongs to a country within the continent of Asia.
https://imgur.com/a/bZhQAwz
So far, I've created "Imagination land" and attached it to "Africa" in Firebase. I want to show this, only in the Africa component. And obviously, I want to show all the countries with the Asia tag in the Asia component.
Thanks
EDIT:
Problem is solved.
import React, { Component, useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import firebase from '../config'
import './Countries.css'
import props from './Navbar/VerContinentToolbar';
const useCountries = continent => {
const [countries, setCountries] = useState([]);
console.log('continent', continent) // <--- Get it as your first argument
console.log(continent.toString())
useEffect(() => {
firebase
.firestore()
.collection(continent.toString())
.onSnapshot((snapshot) => {
const newCountries = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setCountries(newCountries)
})
}, [])
return countries
}
const CountryList = ({ continent, displayFields = [] }) => {
const countries = useCountries(continent); // <--- Pass it in here
return (
<div className="countries">
{countries.map(country => (
<div key={country.id}>
<div className="entry">
{displayFields.includes("continent") && (
<div>Name of continent: {country.continent}</div>
)}
{displayFields.includes("revName") && (
<div>{country.revName}</div>
)}
{displayFields.includes("countryName") && (
<div><Link to={"./Jumbotron"}>{country.countryName}</Link></div>
)}
{displayFields.includes("dest1") && (
<div>Destination 1: {country.dest1}</div>
)}
{displayFields.includes("dest2") && (
<div>Destination 2: {country.dest2}</div>
)}
{displayFields.includes("dest3") && (
<div>Destination 3: {country.dest3}</div>
)}
{displayFields.includes("beerPrice") && (
<div>Beer price: {country.beerPrice}</div>
)}
{displayFields.includes("foodPrice") && (
<div>Food price: {country.foodPrice}</div>
)}
{displayFields.includes("hostelPrice") && (
<div>Hostel price: {country.hostelPrice}</div>
)}
{displayFields.includes("review") && <div>Review: {country.review}</div>}
{displayFields.includes("imgUrl") && <img src={country.url} alt="no-img" />}
}
</div>
</div>
))}
</div>
);
};
export default CountryList
const VerContinentToolbar = (props) => {
return (
<Menu className="nav-icon">
<CountryList
continent={props.continent}
displayFields={["countryName"]}
/>
</Menu>
);
};
Thanks for all your help.
Pass it as a prop (continent) from your continent component
const Africa = () => {
return (
<div>
<VerContinentToolbar continent="Africa" />
</div>
);
};
In <VerContinentToolbar />, get the prop and pass it down to <CountryList />. Rather than passing props down to grandchildren components you can use the context API for that or Redux for that.
const VerContinentToolbar = props => {
console.log('continent prop is now here', props.continent)
return (
<Menu className="nav-icon">
<CountryList continent={props.continent} displayFields={["countryName"]} />
</Menu>
);
};
In <CountryList />, get the prop (continent) and pass it into your useCountries hook.
const CountryList = props => {
const countries = useCountries(props.continent); // <--- Pass it in here
console.log(countries)
return (
<div className="countries">
{countries.map(country => (
{/* ...code */}
))}
</div>
);
};
And finally in your hook get it as the first argument
const useCountries = continent => {
const [countries, setCountries] = useState([]);
console.log('continent', continent) // <--- Get it as your first argument
// ...code
return countries
}
As I understand your question to be, you want to within CountryList, call the useCountries hook to specify the collection you want.
const useCountries = (collection) => {
const [countries, setCountries] = useState([])
useEffect(() => {
firebase
.firestore()
.collection(collection) // <-- pass collection argument here
.onSnapshot((snapshot) => {
const newCountries = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setCountries(newCountries)
})
}, [])
return countries
}
In CountryList pass the value you want to useCountries
const countries = useCountries('Africa');