why is MUI CORE basic rating code is giving me setValue as undefined?

i tried using MUI CORE for first time and it’s giving me arror as i wanted to use active first rating and set value is not defined

i

mport './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Movie from './components/movie';
import data from './data';
import Rating from '@mui/material/Rating';
import React, { useState } from 'react';

function App() {
  
  console.log(data)
  return (
    <div className="App">
       
      <Rating

  name="simple-controlled"
  value={3}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
/>
    </div>
  );
}

export default App;

type here

Answer

Ey!

The only thing that i can see is that you are trying to use “setValue” in the “onChange” event handler for the “Rating” component, but there is not a “setValue” defined, so maybe that’s the problem.

Here is a possible solution:

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Movie from './components/movie';
import data from './data';
import Rating from '@mui/material/Rating';
import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState(3);

  console.log(data)
  return (
    <div className="App">
       
      <Rating
        name="simple-controlled"
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      />
    </div>
  );
}

export default App;

useState hook is used to create a state variable called “value” with an initial value of “3”. setValue function is used to update the value of the “value” state variable when “onChange” event is fired.