Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

121
Visualizações
How to extract deeply nested array of objects and move to React Hook state?

I have one array of 49 objects in total. Inside each nested object, there is another nested "children" array. And inside this array, there is a value of "text".

I am trying to map and filter out these values only, to concat/combine the text and move them to my React Hook. This way I am left with only text so I can calculate the reading time based on the amount of textual content.

My Hook:

const [textSize, setTextSize] = useState();

4 out of 49 objects example:

0: {_key: 'ade9a24f5cb6', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}
1: {_key: '5aa8a2fa2969', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}
2: {_key: '602703f9c2b7', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}
3: {_key: '211597e8045a', _type: 'block', caption: null, children: Array(1), markDefs: Array(0), …}

Inside one of the "children" array:

0: {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: 'Lorem ipsum dolor sit amet'}

and from that array, I need the text of each object if that makes sense?

Array has 49 objects => Each object has nested Array (children) => Each children array has value "text".

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

How about something like this? If I'm understanding your problem correctly..

let array = [
  {_key: 'ade9a24f5cb6', _type: 'block', caption: null, children: [
    {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '1 Lorem ipsum dolor sit amet'},
    {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '2 Lorem ipsum dolor sit amet'}
  ], markDefs: Array(0) },
  {_key: '5aa8a2fa2969', _type: 'block', caption: null, children: [
    {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '3 Lorem ipsum dolor sit amet'}
  ], markDefs: Array(0) },
  {_key: '602703f9c2b7', _type: 'block', caption: null, children: [
    {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '4 Lorem ipsum dolor sit amet'},
    {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '5 Lorem ipsum dolor sit amet'},
    {_key: '76f4ec1ed87f', _type: 'span', marks: Array(0), text: '6 Lorem ipsum dolor sit amet'},
  ], markDefs: Array(0) },
  {_key: '211597e8045a', _type: 'block', caption: null, children: [], markDefs: Array(0) }
]

let results = array.map(x => x.children).flat().map(y => y.text);
console.log(results);

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda