React rest call map result to selectbox with avatar and label per option-CodePudding

Hi here is rest response:

[
  {
    "self": "https://your-domain.atlassian.net/rest/api/3/project/EX",
    "id": "10000",
    "key": "EX",
    "name": "Example",
    "avatarUrls": {
      "48x48": "https://your-domain.atlassian.net/secure/projectavatar?size=large&pid=10000",
      "24x24": "https://your-domain.atlassian.net/secure/projectavatar?size=small&pid=10000",
      "16x16": "https://your-domain.atlassian.net/secure/projectavatar?size=xsmall&pid=10000",
      "32x32": "https://your-domain.atlassian.net/secure/projectavatar?size=medium&pid=10000"
    },
    "projectCategory": {
      "self": "https://your-domain.atlassian.net/rest/api/3/projectCategory/10000",
      "id": "10000",
      "name": "FIRST",
      "description": "First Project Category"
    },
    "simplified": false,
    "style": "classic",
    "insight": {
      "totalIssueCount": 100,
      "lastIssueUpdateTime": "2022-12-08T07:09:19.702 0000"
    }
  },
  {
    "self": "https://your-domain.atlassian.net/rest/api/3/project/ABC",
    "id": "10001",
    "key": "ABC",
    "name": "Alphabetical",
    "avatarUrls": {
      "48x48": "https://your-domain.atlassian.net/secure/projectavatar?size=large&pid=10001",
      "24x24": "https://your-domain.atlassian.net/secure/projectavatar?size=small&pid=10001",
      "16x16": "https://your-domain.atlassian.net/secure/projectavatar?size=xsmall&pid=10001",
      "32x32": "https://your-domain.atlassian.net/secure/projectavatar?size=medium&pid=10001"
    },
    "projectCategory": {
      "self": "https://your-domain.atlassian.net/rest/api/3/projectCategory/10000",
      "id": "10000",
      "name": "FIRST",
      "description": "First Project Category"
    },
    "simplified": false,
    "style": "classic",
    "insight": {
      "totalIssueCount": 100,
      "lastIssueUpdateTime": "2022-12-08T07:09:19.702 0000"
    }
  }
]

I want to make select bobx having

<option value={data.id}><Img {data.16x16}/>data.label</option>

But result would be all projects if company has multiple projects so select box values have to map or loop into react

<Select options="result">

Im stuck as my code displays only label not any image there. Another problem is that using data.avatarUrls.16x16 does not compile. VSCode says expecting "," and puts red underline to 16x16

Here is my code a lot is broken here because I have tested a lot ways but no luck

import React, { useState } from 'react';
import Select from 'react-select'

import { components } from 'react-select';

//Kun selectbox
const handleChange = event => {
  //console.log(event.target.value);
  setSelected(event.target.value);
};
//Palauttaa projectit json taulukon


const getProjects = async () => {
  //Matti tähän sitten atlasion cmpany projection haku
  const response = await api.asUser().requestJira(route`/rest/api/3/project`, {
    headers: {
      'Accept': 'application/json'
    }
  });
  const data = await response.json();
  //Mapataa hausta tarvittavat tiedot
  const result = data.map(function (item, i) {
    console.log('test');
    return [
      {
        label: item.name,
        value: item.id,
        avatar: item.avatarUrls.16x16
      }
    ]
  })
  return result
}

function Projects() {
  //haetaan atlasiansita projectit array
  const p = getProjects
  //asetetaan state selectbox muutokselle
  const [selected, setSelected] = useState(p.id);

  return (
    <div className='projects'>
      <Select 
        className='select-projects' 
        options={p} 
        onChange={handleChange} 
      />
    </div>
  );
}

export default Projects

CodePudding user response：

what is wrong in this, im trying to customo label but codesandobx dont generate any output:

import React from 'react';
import Select from "react-select";
import Avatar from "react"


const options = [
  {
    label: "Hoorray",
    value: 10,
    avatar: "https://oncoqr.com.dedi4187.your-server.de/wp-content/uploads/2017/08/cropped-icon-16×16.jpg"
  },
  {
  label: "jippikajee",
  value: 11,
  avatar: "https://oncoqr.com.dedi4187.your-server.de/wp-content/uploads/2017/08/cropped-icon-16×16.jpg"
  }
]


function Projects() {
  //haetaan atlasiansita projectit array
  //asetetaan state selectbox muutokselle
  /*const [selected, setSelected] = useState(p.id);*/

  const CustomOption = (props) => {
    const { data, innerRef, innerProps } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "flex-start",
          alignItems: "center"
        }}
      >
        <Avatar alt="Avatar" src={data.avatar} />
        <div ref={innerRef} {...innerProps}>
          {data.label}
        </div>
      </div>
    ) 
  };

  return (
    <div className='projects'>
      <Select
        className='select-projects'
        options={options}
        /*onChange={handleChange}*/
        components={{ Option: CustomOption }}
      />
    </div>
  );
}

export default Projects

CodePudding user response：

Now I tryed another aprox:

import React from "react";
import Select from "react-select";


const options = [
  {
    label: "Hoorray",
    value: 10,
    avatar:
      "https://oncoqr.com.dedi4187.your-server.de/wp-content/uploads/2017/08/cropped-icon-16×16.jpg"
  },
  {
    label: "jippikajee",
    value: '11',
    avatar:
      "https://oncoqr.com.dedi4187.your-server.de/wp-content/uploads/2017/08/cropped-icon-16×16.jpg"
  }
]
function Projects() {
  //haetaan atlasiansita projectit array
  //asetetaan state selectbox muutokselle
  /*const [selected, setSelected] = useState(p.id);*/

  return (
    <div className="projects">
      <Select
        className="select-projects"
        options={options}
        formatOptionLabel={options => (
          <div className="select-option">
            <img src={options.image} alt="Avatar"/>
            <span>{options.label}</span>
          </div>
        )}
      />
    </div>
  );
}

export default Projects;

Code sandbox does not show again anything.