How to Iterate through an Object which has an array, object and string in it

Question

I'm trying to display the data inside a Card by looping through the object:

1. If the value is a String it has to display in a <p> tag.
2. If the value is an Array it has to display in a table.
3. If the value is an Object it has to display in a card again.

The below code only display the value1 as the if statement that checks the string returns the value and for loop stops there.Is there any way I can do what I mentioned above for all there types by looping through?

import React, { Component } from 'react';
import { Card, Table } from "react-bootstrap";

const obj1 = {
    "title1": "value1",
    "title2": ["value2", "value3", "value4"],
    "title3": {
    "title4": "value5",
    "title5": "value6"
    }
    };

class Parse extends Component {

    parseHandler = (data) => {
        let arr = Object.values(data);
        for(let i in arr) {
            if (typeof arr[i] === 'object' && !Array.isArray(arr[i])) {
                return (
                    Object.values(arr[i]).map(arrData => {
                        return (
                            <Card>
                                <Card.Body>
                                    <p>{arrData}</p>
                                </Card.Body>
                            </Card>
                        )
                    })
                )
            } if(Array.isArray(arr[i])) {
                return (
                arr[i].map(arrData2 => {
                    return (
                        <Table>
                            <tr>
                                <td>{arrData2}</td>
                            </tr>
                        </Table>
                        )
                    }    
                ))
            } if(typeof arr[i] === 'string') {
                return (
                    <p>{arr[i]}</p>
                )
            }
        }
    }

    render() { 
        return ( 
            <Card>
                {this.parseHandler(obj1)}
            </Card>
         );
    }
}
 
export default Parse;

Answer 1

When adding a return statement at a for loop it will break the loop. Given your code implementation you may want to create a content array. You would push the value to the array. Finally you would return the array:

parseHandler = (data) => {
  const arr = Object.values(data);
  const content = [];
  for(let i in arr) {
      if (typeof arr[i] === 'object' && !Array.isArray(arr[i])) {
          content.push(
              Object.values(arr[i]).map(arrData => {
                  return (
                      <Card>
                          <Card.Body>
                              <p>{arrData}</p>
                          </Card.Body>
                      </Card>
                  )
              })
          )
      }else if(Array.isArray(arr[i])) {
          content.push(
          arr[i].map(arrData2 => {
              return (
                  <Table>
                      <tr>
                          <td>{arrData2}</td>
                      </tr>
                  </Table>
                  )
              }    
          ))
      }else if(typeof arr[i] === 'string') {
          content.push(
              <p>{arr[i]}</p>
          )
      }
  }
  return content
}