Javascript/React map unique json names to buttons-CodePudding

I have the following JSON

[
{"location":"2034","type":"Residential","price":400000,"address":"123 Fake Street","suburb":"Maroubra","historical_DAs":0,"description":"Residential","property_ID":1},
{"location":"2036","type":"Commercial","price":475000,"address":"123 Fake Street","suburb":"Coogee","historical_DAs":10,"description":"Government","property_ID":2},
{"location":"2035","type":"Food & Bev","price":56000,"address":"123 Fake Street","suburb":"Clovelly","historical_DAs":3,"description":"Residential","property_ID":3},
{"location":"2031","type":"Education","price":69070,"address":"123 Fake Street","suburb":"Randwick","historical_DAs":7,"description":"Government","property_ID":4},
{"location":"2036","type":"Education","price":69070,"address":"123 Fake Street","suburb":"Randwick","historical_DAs":7,"description":"Government","property_ID":5}

]

And I want to take the unique values in the 'description' field and map them to some buttons.

I have looked at other answers and have created the following:

const uniqueDescription = [...new Set(info.map(item => item.description))]; console.log(uniqueDescription);

Which provides the 2 unique values I want, I am unsure how to place them into button components using props.

I have a function called TypeButtons:

    function TypeButtons({uniqueDescriptions}) {
    return (
        <div>
             <div>
                 <div className="hidden lg:inline-flex mb-1 px-9">     
                <button      
                 className="button"
                 onClick={() => {placeholder}}
                 key={id}
                 >
                    {uniqueDescriptions}
                 </button>        
             </div>
             </div>
   </div>
    )
        }
export default TypeButtons

Which is then passed through to another component and renders it like so:

  <div className="hidden lg:inline-flex mb-1 px-2">
      {/* Mapping in the unique descriptions */}
      {uniqueDescription?.map(({item}) => (
     <TypeButtons
       uniqueDescriptions={uniqueDescription} 
     />
     ))}

What I end up with is the following:

It is creating two buttons, which is correct, but with both unique values in both buttons.

How do I display the two unique values in two unique buttons?

Thanks!

CodePudding user response：

whe this code run

const uniqueDescription = [...new Set(info.map(item => item.description))]; console.log(uniqueDescription);

uniqueDescription variable has an array value

["Residential", "Government"]

and in this code u dont need destructive item

{uniqueDescription?.map(({item}) => ( ))}

so just do like this

{uniqueDescription?.map((item) => ( ))}

if u need example, u can see this code

CodePudding user response：

uniqueDescriptions is an array with two items in it. If you interpolate the array into the JSX like you're doing, the result will be both array items joined together by a comma.

{uniqueDescriptions}

That's not what you want. You need to reference the item being iterated over in the array. Change the signature of TypeButtons so that its prop is named, say, description (singular), and then do:

{uniqueDescription?.map(description => (
  <TypeButtons
    description={description}
  />
))}

You also don't need to destructure anything when mapping over uniqueDescription, because it's an array of strings, not an array of objects.