我在 React 中使用来自一组对象的数据的三元操作不起作用

Question

I want to change the class of an graphic bar when 'complete' is true or false. Look:

let data = [
    {
      name: 'Montagem de placas', dados_em_porcentagem: 100, complete: true,
    },
    {
      name: 'Montagem de produtos', dados_em_porcentagem: 60, complete: false,
    },
    {
      name: 'Teste de produtos', dados_em_porcentagem: 100, complete: true,
    },
    {
      name: 'Embalagem de produtos', dados_em_porcentagem: 0, complete: false,
    },
    {
      name: 'Montagem de Kits', dados_em_porcentagem: 0, complete: false,
    },
    {
      name: 'Montagem de cabos', dados_em_porcentagem: 100, complete: true,
    },
  ];

<Bar dataKey="dados_em_porcentagem" barSize={40} className={data.complete ? "green" : "yellow"} /> 

The bars are all yellow! The bars are all yellow!

Answer 1

Since data in an array, you can iterate over it and render each value like the following

{data.map((element) => (<Bar dataKey="dados_em_porcentagem" barSize={40} className={element.complete ? "green" : "yellow"} />))}