React Typescript how to add a counter for each item instantiated?

Question

I see some similar questions have been posted, but I am stuck with my issue considering it's a bit different. My question is that how can I add counting (like 1,2) for each list in the same line?

`

class AttendeeListPage extends Component<any,any> {
        ...
        render(){
        let attendarr: any[] = [];
        let countArr : number[] = [];
        for (let i = 0; i < this.state.arr.length; i++){
            countArr.push(i+1);
            attendarr.push(<AttendeeBox
                email={this.state.arr[i][0]}
                status={this.state.arr[i][1]}
                eventNum={this.props.eventNum}
            />)
        }

        return (
            <div className='App'>
                <div>
                    {countArr}
                    {attendarr}
                </div>
            </div>
        );
        }
}

export default AttendeeListPage;

`

My AttendeeBox file:

`

class AttendeeBox extends Component<any,any> {
    constructor(props:any){
        super(props);
        this.state = {id: this.props.eventNum(), updateForced: false, ForceUpdateNow: false}
    }
    componentDidMount(): void {
        this.setState({ForceUpdateNow:true})
    }
    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void {
        if(this.state.id !== this.props.id){
            this.setState({id: this.props.id});  //should probably be id: this.state.id
        }
    }

    render() {
        return (
            <div className='AttendeeBox'>
                <div className='listElement'>
                    Email : {this.props.email}  &nbsp;
                </div>
                <div className='listElement'>
                    Status : {this.props.status}
                </div>
            </div>
        )
    }
}

export default AttendeeBox;

`

My attempt looks like:

As you can see, the counter is seperated from the list box and positioned on top of it. I'm not sure how to make them work together. Thanks!

Answer 1

I believe this is a matter of structure/CSS, also, your countArr is just an array of numbers, there is no structure for it, so you'll have to use a .map and some HTML structure to hold it in place.

class AttendeeListPage extends Component<any,any> {
        ...
        render(){
        let attendarr: any[] = [];
        let countArr : number[] = [];
        for (let i = 0; i < this.state.arr.length; i++){
            countArr.push(i+1);
            attendarr.push(<AttendeeBox
                email={this.state.arr[i][0]}
                status={this.state.arr[i][1]}
                eventNum={this.props.eventNum}
            />)
        }

        return (
            <div className='App'>
                <div className='indexes'>
                    {countArr.map(index => <div>{index}</index>}
                </div>
                <div className='container'>
                    {attendarr}
                </div>
            </div>
        );
        }
}

export default AttendeeListPage;

Component CSS:

.App {
  display: flex;
}

the div indexes return all count in countArr inside other divs, which then hold one above the other. Similarly, you cound use countArr.push(<div>i+1</div>) and adjust the code.

Hope this makes sense, if not I can use code sandbox to better present it.