Show warning when key is not provided

[igolkotek]

Hi,
Just tried to repeat your example with a pair of MdFavoriteBorder/MdFavorite and toggling active state by Click.
Console log confirms this.state.active is changed by click, but icon change not happen. (((

import { MorphReplace } from 'react-svg-morph';
import MdFavoriteBorder from 'react-icons/lib/md/favorite-border';
import MdFavorite from 'react-icons/lib/md/favorite';

toggleChecked: function() {
    this.setState({active: !this.state.active});
  },
  render() {
    var icon;
    if(this.state.active) {
      console.log("active");
      icon = <MdFavoriteBorder />;
    } else {
      console.log("passive");
      icon = <MdFavorite />;
    }
    return (
      <div onClick={this.toggleChecked} >
        <MorphReplace >
          { icon }
        </MorphReplace>
      </div>
    );
  }

Can't understand the reason.
Could you please help

Iho

[gorangajic]

you will need to provide key prop to both icons

    if (this.state.active) {
      console.log("active");
      icon = <MdFavoriteBorder key="favorite-border" />;
    } else {
      console.log("passive");
      icon = <MdFavorite key="favorite" />;
    }

[igolkotek]

OK, thanks