title: How do I display base64 inside map loop(assumption) in ReactJS
body: <p>I have a REST API that returns an image when I request with the url + (plus) file name and I want to display it in the image column in a table.</p>
  <p>I use:<br>
  axios <strong>0.18.0</strong> <br>
  reacj <strong>16.13.0</strong> <br>
  react-bootstrap-table2-toolkit <strong>1.3.1</strong></p>
  <p>My assumption is that react-bootstrap-table2-toolkit works like map function.</p>
  <p>I have column that will render image like this:</p>
  <pre><code>{
        dataField: 'img_url',
        text: 'Image',
        formatter: (cell, row) =&gt; {
          let renderPosts = async () =&gt; {
            try {
              let res = await axios.get('https://myApiUrl:6601/'+cell,{
                responseType: 'arraybuffer' 
              });
              let posts = _imageEncode(res.data);
              console.log(posts)
              return &lt;img src={`data:image/jpeg;base64,${posts}`} /&gt;
            } catch (err) {
              console.log(err);
            }
          }
          
          return renderPosts()
        } 
      },
  </code></pre>
  <p>But I got error like this:</p>
  <blockquote>
  <p>Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>
  <br>
  <br>
  <h2>UPDATE</h2>
  <p>I changed the method above. by making this function outside of render() function</p>
  <pre><code>getImg = async (cell) =&gt; {
      try {
        let res = Promise.resolve(axios.get('https://myApiUrl:6601/'+cell,{
                responseType: 'arraybuffer' 
              }));
        return res.then(res=&gt;{
          let mimetype=&quot;image/jpeg&quot;
          let x =`data:${mimetype};base64,${btoa(String.fromCharCode(...new Uint8Array(res.data)))}`
          console.log(x)
          return x
        })
      } catch (err) {
        console.log(err);
      }
    }
  </code></pre>
  <p>then I use getImg() function inside <strong>formatter</strong> like this</p>
  <pre><code>{
        dataField: 'img_url',
        text: 'Image',
        formatter: (cell, row) =&gt; {
          let x = async () =&gt; await this.getImg(cell)
          return &lt;img src={`${x()}`} /&gt;
        },
      },
  </code></pre>
  <p>but I got [object Promise] like this:<br>
  <a href="https://i.stack.imgur.com/poyuT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/poyuT.jpg" alt="enter image description here" /></a></p>
  <p><strong>I mean just want to retrieve the result string from conversion to base64</strong></p>
  <br>
  <br>
  <p>I still new to this problem,<br>
  hope you can help, thanks:)</p>