"Value Below was evaluated just now" - React (Vibrantjs)

Question

Hello, everyone. I’m using the library Vibrantjs passing an array of images and saving the return in the state of my component in React. As in the code snippet below.

  gerarPaleta = () => {
    let imagens = this.state.imagens;
    let paletaTemp = [];

    for (let i in imagens) {
      Vibrant.from(imagens[i].src.small).getPalette()
      .then((palette) =>
        paletaTemp.push({
          id: i,
          paleta: palette
        })
      );
    }
    this.setState({ paletas: paletaTemp });
    console.log('Paletas: ', this.state.paletas);
  }

The problem is that I can’t access the state data paletas. Because it returns a warning in the browser console

Value Below was evaluated just now.

And it appears in this structure:

And what I want is to render the color in a div:

render() {
  ...
  let paletas = this.state.paletas;
  ...
  <div className="container">
    {paletas.map((paleta, index) => (
      <div className="row">
        <div className="col-sm paleta" style={{background: paletas.paleta.DarkMuted.hex }}>
        </div>
      </div>
    ))}
  </div>
  ...
}

But the map does not run at any time, because the array is "empty".

I appreciate anyone who can help me. :)

Answer 1

I ended up solving it another way:

  gerarPaleta = () => {
    let imagens = this.state.imagens;

    Promise.all(imagens.map(({ src }) =>
      Vibrant.from(src.small).getPalette()))
      .then(
        paletas =>
        this.setState({ paletas })
      )
      .then(
        paletas =>
        console.log("Paletas: ", this.state.paletas)

      );
  }

Answer 2

You’re accessing it wrong, it would be: paleta.paleta.DarkMuted.hex, because in the map was placed paleta to bring each item and inside is the id and the paleta and the normal continuation as already mentioned above.

Example:

render() {
  ...
  let paletas = this.state.paletas;
  ...
  <div className="container">
    {paletas.map((paleta, index) => (
      <div className="row">
        <div className="col-sm paleta" 
             style={{background: paleta.paleta.DarkMuted.hex }}>
        </div>
      </div>
    ))}
  </div>
  ...
}

it would be good if you rename then to item (instead of palette, because the next object is palette, I think it improves the reading of the code) and the example would be:

render() {
  ...
  let paletas = this.state.paletas;
  ...
  <div className="container">
    {paletas.map((item, index) => (
      <div className="row">
        <div className="col-sm paleta" 
             style={{background: item.paleta.DarkMuted.hex }}>
        </div>
      </div>
    ))}
  </div>
  ...
}

---

Simulating:

class Home extends React.Component {
  constructor(props) { 
    super(props);
    this.state = {
      paletas: []
    };    
  } 
  gerarPaleta = () => {  
    const paletas = this.state.paletas;
    paletas.push({id:1, paleta:{DarkMutet:10}});
    paletas.push({id:2, paleta:{DarkMutet:20}});
    paletas.push({id:3, paleta:{DarkMutet:30}});
    this.setState({paletas});    
  }
  componentDidMount(){
    this.gerarPaleta();
  }
  render() {
  const paletas = this.state.paletas;
    return (
      <div>
      {paletas.map((item, index) => (
        <div>DarkMutet: {item.paleta.DarkMutet}</div>
      ))}
      </div>
    )
  }
}

ReactDOM.render(<Home/>,document.getElementById('root'));

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