Rendering Component Returned Component Completely In React

Question

I'm creating an app and I need to render a form element multiple times with some of the variable names changed around. Unfortunately, I'm having some issues where not all of the code is being returned from the component. I've taken out some of the variable declarations to make this easier to read.

Primary Component

export default function StrengthLog() {
   
    return (
        <Container id="strengthContainer">
            <SelectMovements />
            <Form>
            {
                movement.map(movement => {
                    const checked = movement[1].triggered
                    if (checked){
                        return <StrengthForm props={movement}/>
                    }
                })
            }
            <Button content='submit'>Submit</Button>
            </Form>
        </Container>
    )
}

Component being returned

export default function StrengthForm({props}) {
    return (
        <div>
            <h1>Hello!</h1>
                {               
                    props[1].triggered
                    ? (
                        setsArray.map(item => {
                            return <Group widths='equal'>
                            <Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
                            <Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
                            <Button className="addSet">+</Button>
                            <Button className="deleteSet">x</Button>
                            </Group>
                        })
                    )
                    : console.log('Thing')
                 }
        </div>
    )
}

What's happening is that it's returning the <h1> of StrengthForm but it's not returning the other information contained within the curly braces.

Just did a console.log(props[1].triggered) and it does return as true — SmithBWare89
– SmithBWare89, Commented Nov 9, 2020 at 18:24
const setsArray = new Array(props[1].sets) where props[1].sets is always set to 3 for now. — SmithBWare89
– SmithBWare89, Commented Nov 9, 2020 at 18:28

SmithBWare89 · Accepted Answer · 2020-11-09 18:40:56Z

The issue was that I was declaring setsArray as const setsArray = new Array(props[1].sets) which gives me StrengthForm.js:9 (4) [empty × 4] in the console. I suspected because the array actually had no content that I needed to add something there so I commented my initial declaration and did this instead.

    const setsArray = (() => {
        const emptyArray = []
        for(let i = 0; i <= props[1].sets; i++) {
            emptyArray.push(' ');
        }
        return emptyArray;
    })();

    return (
        <div>
            <h1>Hello!</h1>
                {               
                    props[1].triggered
                    ? (
                        setsArray.map(() => {
                            return <>
                            <Group widths='equal'>
                            <Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
                            <Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
                            <Button className="addSet">+</Button>
                            <Button className="deleteSet">x</Button>
                            </Group>
                            </>
                        })
                        
                    )
                    : console.log('Thing')
                 }
        </div>
    )

Everything popped up after I changed it to this!

Collectives™ on Stack Overflow

Rendering Component Returned Component Completely In React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related