1

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

John Smith
  • 11
  • 1
  • Can you share a CodeSandBox example? I can't reproduce the error – Jae May 20 '22 at 06:09
  • I tried to recreate it in CodeSandBox and for some reason it is working there, but not when I try to do it myself. Could it be because of some other dependency? Im at a loss here – John Smith May 20 '22 at 09:01

1 Answers1

0

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.

Jae
  • 376
  • 2
  • 11