Javascript/React map unique json names to buttons

Question

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!

General Grievance · Accepted Answer · 2023-05-08 17:58:39Z

1

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}) => (
     <TypeButtons
       uniqueDescriptions={uniqueDescription} 
     />
     ))}

so just do like this

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

if u need example, u can see this code

edited May 8, 2023 at 17:58

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Aug 29, 2022 at 2:33

ade bayu s

1243 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2022-08-29 01:21:26Z

0

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.

answered Aug 29, 2022 at 1:21

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

Javascript/React map unique json names to buttons

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related