0

I have a button which has a value that changes based on State. One of the instances combines a string and a Fontawesome object into an array. I get the key warning on render, however, I have no idea how to set the key on value.

Below I've included a snippet of the relevant code to illustrate what I'm doing. There are no loop wrapped around the code, which is where I've seen the key requirement previously.

The code actually works fine, switching the value in the button field, however, I get the annoying warning in the console.

The error is "Warning: Each child in a list should have a unique "key" prop."

const [ saveBtTxt, setSaveBtText ] = useState(["Save Filter"]);

const saveFilter = (e) => {
    if(showFilterField) {
      setSaveBtText(["Saved ",<FontAwesomeIcon icon={["far","check"]} />])
    }
    setFilterField(true);
  }

return (
<Button className="outline" label={saveBtTxt} clickHandler={saveFilter} />
)
Ben
  • 45
  • 3
  • 1
    Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – cutiko Mar 25 '19 at 03:00
  • Not a duplicate, strictly speaking – Ben Mar 25 '19 at 03:29

1 Answers1

1

Try adding a key to the <FontAwesomeIcon ... object, like so:

const [ saveBtTxt, setSaveBtText ] = useState(["Save Filter"]);

const saveFilter = (e) => {
    if(showFilterField) {
      setSaveBtText(["Saved ",<FontAwesomeIcon key="1-saved" icon={["far","check"]} />])
    }
    setFilterField(true);
  }

return (
<Button className="outline" label={saveBtTxt} clickHandler={saveFilter} />
)
Dale O'Brien
  • 4,108
  • 2
  • 15
  • 10
  • Thanks Dale. That did it. Strangely it had a problem with another instance because of another FontAwesome object that was elsewhere in the document but was not a sibling of this one. My presumption was that keys were only needed when you are dealing with siblings, and that appears to be incorrect. – Ben Mar 25 '19 at 03:09