menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team
Show previous messages

September 26, 2020 at 5:49pm
I have tried multiple libraries and failed to build this above UI what should I do???
Edited
  • reply
  • like

September 27, 2020 at 6:15pm
Not sure I'm totally grasping what you'd like to do here but is it not possible to use a mix of CSS grids, flex, and dynamic heights to build this? Use a grid for overall layout, set grid cells to display: flex; to fill, and then update heights of each via class, using new user or API values?
  • reply
  • like

September 29, 2020 at 4:35pm
Not sure I'm totally grasping what you'd like to do here but is it not possible to use a mix of CSS grids, flex, and dynamic heights to build this? Use a grid for overall layout, set grid cells to display: flex; to fill, and then update heights of each via class, using new user or API values?
I think you should use props, and set classes according to the targeted user. Like for example, if(user.name === null) { <div className='images'> followed by the content. You can put it above Render, if you atr using class based component.
Edited
  • reply
  • like

October 3, 2020 at 5:29pm
It likely wouldn't be a react specific library. You could use something like Chart.js https://www.chartjs.org/
  • reply
  • like

October 8, 2020 at 8:20am
Hey guys
  • reply
  • like
What is the proptypes for files? Is it Object?
  • reply
  • like

October 13, 2020 at 7:59am
Hello everyone, How can I change the style of a child component based on the hover of the parent component as I am using React MUI, along with JSS . It's like I have a grid of items based on the hover for each item I want to show a sharp icon. As the icon is a child component of the grid item. *This is my JSX code* function FormRow() { return productIconList.map((product) => ( <Grid container item xs={12} sm={4} direction="column" justify="center" alignItems="center" > <div className={classes.gridItem}> <MoreVertSharpIcon --> This is the icon I want to show up on hover for each grid item className={classes.sharpIcon} fontSize="small" color="disabled" /> <Paper className={classes.paper}>{product.productIcon}</Paper> <Typography variant="subtitle2" style={{ textAlign: "center", marginTop: "10px", fontSize: "0.75em", fontWeight: "100" }} > {product.text} </Typography> </div> </Grid> )); } * MY JSS** root: { flexGrow: 1 },
sharpIcon: { position: "relative", opacity: 0, bottom: "5px", left: "65px" }, gridItem: { background: "#fff", padding: "10px", borderRadius: "5px", "&:hover": { background: "#eee", cursor: "pointer", sharpIcon: { opacity: 1 } },
},
Please suggest me the possible solution
Edited
  • reply
  • like
I don't see key, do you use key?
  • reply
  • like

October 16, 2020 at 12:09am
Csn anyone help me with this issue
  • reply
  • like
using typescript with react for the first time
  • reply
  • like

October 19, 2020 at 5:18pm
Just as a reminder, though this might be a bit obvious. If I see duplicate posts, I will remove one of them. Thanks for reading.
like-fill
2
  • reply
  • like

November 3, 2020 at 5:54pm
like-fill
1
  • reply
  • like
Can someone tell me if this is a valid react native syntax.. I want to return a stack screen for every item in a state variable
  • reply
  • like

November 10, 2020 at 7:19am
how do you rerender a page, when passing a new component
  • reply
  • like
new parameter to a component
  • reply
  • like

November 25, 2020 at 11:38pm
In the "page" component call forceUpdate()
Edited
  • reply
  • like