如何在 React 中向 jsx 元素数组的最后一个元素添加道具？

Question

• I want to have isActive props for the last element in the array as true and rest as false
• initially i am setting all as true but i want to modify it dynamically depending upon the length of the array
• That is if there is only 1 element i want to have isActive as true for the 1st Number component

Example

• Suppose i have 5 elements in number array then i want to have number[3] having isActive true and rest as false

please help stuck over this array manipulation:((

import React, { Component } from 'react'

class Numbers extends Component {
    render() {
        const correctGuesses = this.props.correctGuesses
        let number = [<Number guess={'1-100'} key={0 + Math.random} isActive={true}/>]
        for(let i=0 ; i < correctGuesses ; i++) {
            number.push(<Number guess={`1-${i+2}00`} key={i} isActive={true}/>)
        }

        return (
            <React.Fragment>
                {number}
            </React.Fragment>
        )
    }
}

Answer 1

If you want the last element to have isActive props true you can use this:

Import React, { Component } from 'react'

class Numbers extends Component {
    render() {
        const correctGuesses = this.props.correctGuesses
        let number
        if(correctGuesses === 0) {
            number = [<Number guess={`1-100`} key={Math.random} isActive={true}/>]
        } else if (correctGuesses > 0) {
            number = [<Number guess={`1-100`} key={Math.random} isActive={false}/>]
        }

        for(let i=0 ; i < correctGuesses ; i++) {
            if(i === correctGuesses-1)
                number.push(<Number guess={`1-${i+2}00`} key={i} isActive={true}/>)
            else
                number.push(<Number guess={`1-${i+2}00`} key={i} isActive={false}/>)
        }


        return (
            <React.Fragment>
                {number}
            </React.Fragment>
        )
    }
}

Answer 2

Props are immutable once you assign them. One way would be to set the value to an object and then to set its children value on the go:

import React, { Component } from 'react'

class Numbers extends Component {
    render() {
        const correctGuesses = this.props.correctGuesses;
        let lastActive = {value: true};
        let number = [<Number guess={'1-100'} key={0 + Math.random} isActive={lastActive}/>]
        for(let i=0 ; i < correctGuesses ; i++) {
            lastActive = {value: true};
            number.push(<Number guess={`1-${i+2}00`} key={i} isActive={lastActive}/>)
        }
        
        lastActive.value = false;
        

        return (
            <React.Fragment>
                {number}
            </React.Fragment>
        )
    }
}