Category: React Answers

Sometimes, we want to add 2 Papers side by side in a React Material-UI Grid.

In this article, we’ll look at how to add 2 Papers side by side in a React Material-UI Grid.

How to add 2 Papers side by side in a React Material-UI Grid?

To add 2 Papers side by side in a React Material-UI Grid, we can add a outer Grid component with the container prop set to make it a container.

Then we can add 2 more Grids inside it to and add one Paper inside each.

For instance, we write:

import * as React from "react";
import { makeStyles } from "@material-ui/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing * 2,
    textAlign: "center",
    color: "green"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={24}>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

We call makeStyles with a function to style add styles for the root and paper classes.

Then we call useStyles in App to return the classes.

Next, we add the Grid with the container prop to make it a container.

Then we add 2 Grids inside to use as containers for the Paper.

We add the item prop to the Grids to make the display correctly as child elements.

They should display side by side if the screen is large and stacked when the screen is small since we set the xs and sm prop column widths.

Finally, we add the Paper in the child Grids to add our content.

Conclusion

To add 2 Papers side by side in a React Material-UI Grid, we can add a outer Grid component with the container prop set to make it a container.

Then we can add 2 more Grids inside it to and add one Paper inside each.

Sometimes, we want to set the height and width for responsive chart using React Recharts.

In this article, we’ll look at how to set the height and width for responsive chart using React Recharts.

How to set the height and width for responsive chart using React Recharts?

To set the height and width for responsive chart using React Recharts, we can wrap our bar chart with the ResponsiveContainer component.

For instance, we write:

import * as React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from "recharts";

const data = [
  { name: "Page A", uv: 400 },
  { name: "Page A", uv: 300 },
  { name: "Page A", uv: 600 }
];

export default function App() {
  return (
    <ResponsiveContainer width="95%" height={400}>
      <BarChart
        className="barChart"
        width={600}
        height={300}
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        label="heaf"
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="uv" barSize={10} fill="#05386b" />
      </BarChart>
    </ResponsiveContainer>
  );
}

We wrap the BarChart with the ResponsiveContainer to set the BarChart‘s width and height.

And we set the width and height with the width and height props.

We add the BarChart component to render a bar chart.

The data prop has the bar chart data.

The bars are added with the Bar component with the dataKey prop set to the property name of the items in the data array as the value.

To change the bar color, we set the fill prop to the value we want.

We set the margin prop to set the margins of the bar chart.

CartesianGrid adds a grid in the background. XAxis and YAxis adds the x and y axes respectively.

Conclusion

To set the height and width for responsive chart using React Recharts, we can wrap our bar chart with the ResponsiveContainer component.

Sometimes, we want to change a style of a child when hovering over a parent using React Material UI styles.

In this article, we’ll look at how to change a style of a child when hovering over a parent using React Material UI styles.

How to change a style of a child when hovering over a parent using React Material UI styles?

To change a style of a child when hovering over a parent using React Material UI styles, we can call makeStyles with the &:hover selector of the parent element to change the styles when we hover over the child element.

For instance, we write:

import * as React from "react";
import { Grid, makeStyles } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";

const useStyles = makeStyles((theme) => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    "&:hover": {
      cursor: "pointer",
      backgroundColor: theme.palette.grey[100],
      "& $addIcon": {
        color: "purple"
      }
    }
  },
  addIcon: () => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

export default function App() {
  const classes = useStyles();

  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

We call makeStyles with a function that has the outerDiv class property with the "&:hover" property inside it.

We set "&:hover" to a function that changes the background color of the child element.

Also, we have the "& $addIcon" property to set the color of the child element.

Next, we apply the outerDiv class by setting the className prop of Grid to classes.outerDiv.

As a result, when we hover over the Grid, we see that the add icon is purple.

Conclusion

To change a style of a child when hovering over a parent using React Material UI styles, we can call makeStyles with the &:hover selector of the parent element to change the styles when we hover over the child element.

Sometimes, we want to set the default value in React Material-UI select box.

In this article, we’ll look at how to set the default value in React Material-UI select box.

How to set the default value in React Material-UI select box?

To set the default value in React Material-UI select box, we can set the initial value of the state that we use as the Select‘s value prop’s value.

The initial value must match one of the value prop of values of MenuItem.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const followers = [
  { "0-50k": [0, 50000] },
  { "50k-100k": [50001, 100000] },
  { "100k-250k": [100001, 250000] },
  { "250k-500k": [250001, 500000] },
  { "500k-750k": [500001, 750000] },
  { "+1M": [750001, Number.MAX_SAFE_INTEGER] }
];

export default function App() {
  const [value, setValue] = React.useState("50k-100k");
  const handleChange = (event) => setValue(event.target.value);

  return (
    <div>
      <Select
        fullWidth
        id="followers"
        labelId="followersL"
        margin="dense"
        displayEmpty
        name="followers"
        onChange={handleChange}
        value={value}
        variant="outlined"
      >
        {followers.map((element) => {
          const [[key]] = Object.entries(element);
          return (
            <MenuItem value={key} key={key}>
              {key}
            </MenuItem>
          );
        })}
      </Select>
    </div>
  );
}

to define the value state with useState.

We set value‘s initial value to "50k-100k".

Next, we set Select‘s value prop to the value state.

Then when we add the MenuItems, we set the value prop of the MenuItem to key so that the 2nd entry matches the initial value of the value prop.

Conclusion

To set the default value in React Material-UI select box, we can set the initial value of the state that we use as the Select‘s value prop’s value.

The initial value must match one of the value prop of values of MenuItem.

Sometimes, we want to fix the select value is always out of range error with React Material UI.

In this article, we’ll look at how to fix the select value is always out of range error with React Material UI.

How to fix the select value is always out of range error with React Material UI?

To fix the select value is always out of range error with React Material UI, we should make sure the value is a primitive value or the same object reference of the object as the selected value.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const followers = [
  { "0-50k": [0, 50000] },
  { "50k-100k": [50001, 100000] },
  { "100k-250k": [100001, 250000] },
  { "250k-500k": [250001, 500000] },
  { "500k-750k": [500001, 750000] },
  { "+1M": [750001, Number.MAX_SAFE_INTEGER] }
];

export default function App() {
  const [value, setValue] = React.useState("");
  const handleChange = (event) => setValue(event.target.value);

  return (
    <div>
      <Select
        fullWidth
        id="followers"
        labelId="followersL"
        margin="dense"
        displayEmpty
        name="followers"
        onChange={handleChange}
        value={value}
        variant="outlined"
      >
        {followers.map((element) => {
          const [[key, val]] = Object.entries(element);
          return (
            <MenuItem value={val} key={key}>
              {key}
            </MenuItem>
          );
        })}
      </Select>
    </div>
  );
}

to render the MenuItem by calling followers.map with a function that takes the key and val from each element entry with Object.entries.

Then we set the value prop of MenuItem to val.

And the key is used as the value of the key prop and it’s also displayed as the text of the choice to the user.

Then to get the selected value and display it, we set the onChange prop to handleChange and the value prop to value.

We call setValue with event.target.value in handleChange to set the value state to the selected choice, which is the MenuItem‘s value prop’s value.

Conclusion

To fix the select value is always out of range error with React Material UI, we should make sure the value is a primitive value or the same object reference of the object as the selected value.