React - Selecting a Card on the Screen

Question

I’m doing, as an exercise, the Nelio Alves project (Devsup Week 2.0): https://github.com/devsuperior/sds2/tree/master/aula2 Prototype at the Figma: https://www.figma.com/file/LAIvIzyaJsSl2A9NMrnR7W/DSDeliver01?node-id=0%3A1

When you click on a card it should be selected in green. But it is not. In the browser console the following message appears: Warning: Using Unsafe_componentwillreceiveprops in Strict mode is not Recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for Details.

• Move data fetching code or side effects to componentDidUpdate.
• If you’re updating state Whenever props change, refactor your code to use memoization Techniques or move it to Static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following Components: Async, Select

Link on Github of the Project: https://github.com/pauloseibel/dsdeliver-sds2/tree/main/front-web

Answer 1

An example has been simulated according to what you are developing that when you click the block turns green or black:

const config = {
  width:100, 
  height: 60, 
  margin: 10, 
  cursor: 'pointer'
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: [{
        id: 1,
        name: 'card 1',
        selected: false
      }, {
        id: 2,
        name: 'card 2',
        selected: false
      }]
    }
    this.handleClick = 
      this.handleClick.bind(this);
    this.handleCor = 
      this.handleCor.bind(this);
  }
  handleClick(e, id) {
    const cards = this.state.cards.map(c => {
      if (c.id === id) {
        c.selected = !c.selected;
      }
      return c;
    });
    this.setState({cards})
  }
  handleCor(status) {
    return status ? '#008000':'#000000';
  }
  render() {
    const { cards } = this.state;    
    return (
      <div>       
        {cards && cards.map((c, i) => (
          <div 
            onClick={(e) => this.handleClick(e, c.id)}
            style={{ ... config, border:`1px solid ${(this.handleCor(c.selected))}`, background:`${(this.handleCor(c.selected))}`}}>            
          </div>
        ))}
      </div>
    )
  }
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>