Develop Reference

Best way to change CSS in multiple components of the same component in React

I have a component that i'm using 3 times with different data which I am able to complete with the following code;
<div>
<Container className="mt-5">
<Row>
{author_data.map((authors) => {
return (
<Col key={authors.id} className="pe-5 ps-5">
<Author
key={authors.id}
image={authors.image}
author={authors.author}
description={authors.description}
handleClick={(author) => setAuthor(author)}
/>
</Col>
);
})}
</Row>
</Container>
</div>
);
However Im looking to change the CSS on each component once I click on one of the Author components. something like the below using native JS.
document.getElementById("author1").classList.add("addGrayScale");
document.getElementById("author2").classList.add("addGrayScale");
document.getElementById("author3").classList.remove("addGrayScale");
I have used the useState and useContext hooks but I can't seem to get it to work because the Author component will receive the same props. Should I create separate components for each Author? or is there another way to do this.

Is there a difference between using bootstrap react components vs bootstrap class names?

In the react-bootstrap guides, examples use bootstrap components like so:
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
Is there any difference when comparing the above to the following:
<div className="container">
<div className="row">
<div className="col">1 of 1</div>
</div>
</div>

You can pass props to the react components, if that is allowed. If there are no props, they basically do the same thing. React components are translated to the html tags with classnames at the end
For example, semantic-ui-react has beautiful documentation that you can see what it is translated to. Have a look

Yes, one is using the react-bootstrap components...
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
While this is only using Bootstrap CSS classes (assuming bootstrap.css has been included in the React app)...
<div className="container">
<div className="row">
<div className="col">1 of 1</div>
</div>
</div>
Functionally they are the same, and render the same HTML markup in the browser.

How to set state of a childcomponent in react?

In my React component called Grid.js I am using a childcomponent called Pagination. It looks like this:
<StyledBox wrap py={12} px={18}>
<Header />
{state.data}
<Wrapper column justify="center" align="center" p={12}>
<Pagination onChange={this.handleChange} totalPages={10} />
</Wrapper>
</StyledBox>
It is a grid with some pagination functionality. When the user selects a page on the Pagination a changeevent will fire and a stateprop of the Grid will be set called state.data. The issue is that the pagination starts jumping around randomly: looks like the state has changed on the component.
Do I have to move the Pagination out of the Grid component and make it not a childcomponent?

Is the Pagination Component jumping around randomly because previously there was a specific length of data. Then when the this.state.data changes, the length of data is different? So then, the Pagination had to adjust it's positioning. Without more information, it seems like a HTML and CSS issue.
Try to set position: fixed; bottom: 1rem on the Pagination component css and see if it still jumps.
Also, regarding React Components, <Content /> and <Pagination /> components seem to be conceptually sibling and not parent-child related. So I would structure the app something like this:
<ParentContainer>
<Header />
<Content data={this.state.data} />
<Pagination onChange={this.handleChange} totalPages={10} />
</ParentContainer>

How to replace React-Leaflet Popup with custom component?

I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>

Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>

How do you center a div element in react w/out external css file

How do I center a div element in react with using an external css file. I tried using bootstrap classes and inline styles that other people posted but none of those worked. I was wondering how you guys would implement this without an external css file.

If you don't have to support old browsers, you may look into Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try something like this:
<div style={{display: 'flex', justifyContent: 'center'}}>
<div>centered content</div>
</div>

Offsets: The first uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 6 would be centered by adding an offset of 3, that's (12-6)/2.
In markup this would look like:
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
margin-auto: You can center any column size by using the margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>

An easy way to do this using react-bootrsrap is
<Grid>
<Row className="text-center"><h1>Our Products</h1></Row>
</Grid>
Use className (instead of class) to take advantage of Bootstrap's built in class of "text-center".

I am using react-bootstrap for this:
export default class CenterView extends React.Component {
render() {
return (
<Grid>
<Row className="show-grid">
<Col xs={1} md={4}></Col>
<Col xs={4} md={4}>{this.props.children}</Col>
<Col xs={1} md={4}></Col>
</Row>
</Grid>
)
}
}
and then in code
<CenterView>
<LoginForm/>
</CenterView>

Have this between the imports and React Class
const styles = {
center: {
marginLeft: "auto",
marginRight: "auto"
}
}
Then to use
<div className={styles.center}>
hi
</div>

I just added:
<Grid container spacing={2} justify="center"></Grid>

For people using React Bootstrap, here I show an example of the classes text-align and justify-content-center. As the names describe, one is for centering text and the other for centering elements.