reactjs - How to iterate class variables in React?

Question

I am using typescript and I had this class where I need to iterate the values in it.

export default class ModelShadow {
    story: Story[] = [];
    name: string = '';
}

export interface Story {
    title: Title[];
    header: Title[];
}

export interface Title {
    name: string;
    description: string;
}

export const Text1 = ({index}) => {
    <div>
       <input name='story.{index}.name'/>
    </div>
    <div>
       <input name='story.{index}.description'/>
    </div> 
    <button onClick={function that deletes the array depends on the index > delete </button> 


export const Text2 = ({index}) => {
        <div>
           <input name='header.{index}.name'/>
        </div>
        <div>
           <input name='header.{index}.description'/>
        </div> 
          <button onClick={function that deletes the array depends on the index > delete </button> 

I had a Select that adds the Text above to an array and I want to eliminate the null values upon submit. Because every I choose Text1 the index is 0 and add another Text2, the index is 1 and so on so forth.

The result was like this:

  story:
     header: 0: { name: 'test', description: 'test' }
             1: null
             2: { name: 'test', description: 'test' }
     title: 0: null
            1: { name: test', description: 'test' }

It should be like this,

 header: 0: { name: 'test', description: 'test' }
         1: { name: 'test', description: 'test' }
 title:  0: { name: test', description: 'test' }

Thank so much.

question from:https://stackoverflow.com/questions/65895076/how-to-iterate-class-variables-in-react

Answer 1

Waitting for answers