MUI Slider Component causes entire page to blank out

Question

I've copied the code for the Range Slider:

import React from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

function valuetext(value) {
  return `${value}°C`;
}

export default function RangeSlider() {
  const [value, setValue] = React.useState([20, 37]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: 300 }}>
      <Slider
        getAriaLabel={() => 'Temperature range'}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

And I'm using it like this:

import axios from 'axios';
import React, {useState, useEffect } from 'react';

import '../components/Navbar'
import Navbar from '../components/Navbar';
import RangeSlider from '../components/RangeSlider';


export default function Slider() {   
    return (
        <>
            <Navbar />
            <div>
                <header>
                  <p> Edit and save to reload.</p>
                  <p> Edit and save to reload.</p>
                  <RangeSlider />
                </header>
            </div>
        </>
    );
}

However, when I use the component, my entire page goes blank. It is fine without this line. The only thing I've changed from the documentation is "import React from 'react'; ", but I've been getting the same issue even with the original line.

This is from the Chrome console: Error codes

Answer 1

If you can't recreate your error in another environment like CodeSanBox, I guess there is a chance you have a problem with your packgage, not your code.

Check out these below.

1. mismatch between 'react' and 'react-dom' package's version
2. having multiple 'react' version in the project

I found out another stackoverflow question that could be helpful for this case.

Answer 2

You can pick the first element of the array like this:

msgsJson.name[0]

As arrays start at 0. You can also pick a random one like so:

msgsJson.name[Math.floor(Math.random()*msgsJson.name.length)];

I recommend you read up on https://www.w3schools.com/js/js_arrays.asp.