React: How do I use values from an object's specific key?

Question

I am new to React and am trying to figure out how to return a particular objects entry by it's key.

So far, I have an object as such:

const questions = [
  {
    id: '1',
    section: 's1',
    answers: [
      "answer a",
      "answer b",
      "answer c",
      "answer d",
    ]
  },
  {
    id: '2',
    title: 'Question 2',
    answers: [
      "answer a",
      "answer b",
      "answer c",
      "answer d",
    ]
  },
  //etc

which I am currently iterating through and using parts of as props in a component, eg:

  return (
    <div>
      {questions.map((question) => (
        <Question
          key={question.id}
          questionNum={question.id}
          title={question.title}
          answers={question.answers}
        />
      ))}
    </div>
  );

This works fine and as expected.

But now I need to modify this so it only returns the values of 1 given particular key in the object.

I've been searching and experimenting with .get() but to be honest I'm really stumped with how to do this.

Would anyone know the best way to approach this?

const someObj = { key1: 'value1', key2: 'value2', key3: ['someArray'] }; <-- Consider this object. Now, someObj.key1 will get us value1. And, someObj.key3[0] will get us someArray. In your example, questions[0].id will get the value 1. While questions[1].title will get Question 2. So on & so forth. — jsN00b
– jsN00b, Commented Jan 28, 2022 at 6:06
The question is unclear, from which function do you want to return the value of a specific key? If you only want to return one key from the map callback function, you can use object destructuring, questions.map(({title})=>{<Question title={title} />}) — Mohit Kushwaha
– Mohit Kushwaha, Commented Jan 28, 2022 at 6:08
If I understand the question correctly, you'd just need to filter the questions by changing questions.map to questions.filter(q => q.id === 1).map to get the question with ID 1 for example. — user2740650
– user2740650, Commented Jan 28, 2022 at 6:08
@user2740650 yep, thats what I was after. Want to make that an answer? — MeltingDog
– MeltingDog, Commented Jan 28, 2022 at 6:13
Looks like someone did! Note that it may not be very efficient, but if your array of questions isn't very big, it won't matter much. It would be better to put them into a Map where the key is the ID you want. — user2740650
– user2740650, Commented Jan 28, 2022 at 15:15

Amila Senadheera · Accepted Answer · 2022-01-28 06:19:04Z

1

You can filter the questions by a particular key of the object first and then do the map. Let's say id with value 1.

return (
    <div>
        {questions
            .filter(({ id }) => id === "1")
            .map(question => (
                <Question
                    key={question.id}
                    questionNum={question.id}
                    title={question.title}
                    answers={question.answers}
                />
            ))}
    </div>
)

answered Jan 28, 2022 at 6:19

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

Comments

Amaarockz · Accepted Answer · 2022-01-28 06:14:18Z

0

If I got it right, I guess you can do the same using map itself

Assume you have the below array

const questions = [
  {
    id: '1',
    section: 's1',
    answers: [
      "answer a",
      "answer b",
      "answer c",
      "answer d",
    ]
  },
  {
    id: '2',
    title: 'Question 2',
    answers: [
      "answer a",
      "answer b",
      "answer c",
      "answer d",
    ]
  }]

and now you wanna just pull out the answers key alone then you can do something like

const result = questions.map((question) => {answers: question.answers}); // where the specific key here is answers

answered Jan 28, 2022 at 6:14

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

React: How do I use values from an object's specific key?

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