I'm trying to apply a prop id with useState to my DrumPad ponent, passed in from its parent App ponent. In my app.js file, as it's currently set up, I'm getting an error "'id' is assigned a value but never used." Assuming I need to set the variable with useState to pass id to the DrumPad ponent, what do I need to change for it to be applied properly?

App.js:

const sounds = [
  { id: 'snare', letter: 'Q', src: '.mp3' },
  { id: 'bass 1', letter: 'W', src: '.mp3' },
  // etc. 
];

const App = () => {
  const id = useState(''); // (Don't have setId since it won't change)

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sounds.id}
        />
      ))}
    </div>
  );
}

DrumPad.js:

const DrumPad = () => {
  return (
    <div id="id">

    </div>
  );
}

Update:

I found it works fine without setting state with useState, so I'm doing it this way (but not sure if it's optimal):

const App = () => {

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sound.id}
        />
      ))}
    </div>
  );
}


const DrumPad = (props) => {

  return (
    <div id={props.id}>
    </div>
  );
}

I'm trying to apply a prop id with useState to my DrumPad ponent, passed in from its parent App ponent. In my app.js file, as it's currently set up, I'm getting an error "'id' is assigned a value but never used." Assuming I need to set the variable with useState to pass id to the DrumPad ponent, what do I need to change for it to be applied properly?

App.js:

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants./media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants./media/sounds/bass-drum.mp3' },
  // etc. 
];

const App = () => {
  const id = useState(''); // (Don't have setId since it won't change)

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sounds.id}
        />
      ))}
    </div>
  );
}

DrumPad.js:

const DrumPad = () => {
  return (
    <div id="id">

    </div>
  );
}

Update:

I found it works fine without setting state with useState, so I'm doing it this way (but not sure if it's optimal):

const App = () => {

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sound.id}
        />
      ))}
    </div>
  );
}


const DrumPad = (props) => {

  return (
    <div id={props.id}>
    </div>
  );
}

• javascript
• reactjs
• react-hooks

3 Answers 3

You misused useState, and referred to the wrong variable, also your are not really using the id state in your code.

Please refer to Destructuring assignment, useState, Props in JSX

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants./media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants./media/sounds/bass-drum.mp3' },
  // etc. 
];

const App = () => {

// useState returns an array (Tuple), you may use id[0] for the initial value
// const id = useState('');


//     v In case you don't want to use setId - 
// Thats how the "Destructuring assignment" works
const [id] = useState('');


  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
            id={sound.id}

//              v You referenced the global `sounds` variable which is an array
//          id={sounds.id}
        />
      ))}
    </div>
  );
}

Also, you should use props for referencing the attributes your passing:

const DrumPad = (props) => {
  const { id } = props;
  return <div id={id}/>
}

Values declared with the useState hook are declared with a tuple syntax, with one variable representing the value itself and the second being a setter function used to change that value, though you can declare it without the setter. You can read about the state hook here.

But if id is never going to change, that means it would be permanently set as an empty string, which does not seem like it would be the desired oute. You should also ask yourself why you are storing a static value in your state to begin with rather than using a prop if that would be possible, one of the strengths of using React state is its ability to detect changes automatically and make updates. It's tough to see a more suitable alternative without knowing more of your desired functionality, but right now I don't see how you could ever have an actual value for your id without changing it.

It looks like you want to map over your array of sounds, and then probably use id to store a currently selected sound, which would not be possible without using the setter function to alter that id when the desired sound is clicked or otherwise selected.

You are using sounds.id which is not the variable you set using useState, although your usage of useState is also incorrect, as well as your usage of sounds (it's an array not an object, so you can't say sounds.id. You need to do something like sounds[1])

To get rid of the error, and keep the prop passed to DrumPad as state, move the sounds array into the App ponent and do const [id, setId] = useState(sounds[1]). (or you can pick whatever item of the array you want)

You will want to have setId because you are saying it's state. You can remove it until you use it, but if you don't ever use it, 'id' shouldn't be state.