How to add child array input field dynamically in React JS

Question

Here is my code

const useStyles = makeStyles((theme) => ({
root: {
    '& .MuiTextField-root': {
        margin: theme.spacing(1)
    },
},
button: {
    margin: theme.spacing(1)
}
}))

function CreateCourse() {

const classes = useStyles();
const [sectionFields, setSectionFields] = useState([{
    sectionName: '',
    overview: '',
    videoContents: [{
        videoName: '', videoUrl: ''
    }]
}])

function handleChangInput(index, event) {
    const values = [...sectionFields];
    values[index][event.target.name] = event.target.value;
    setSectionFields(values);
}

function handleChangVideoInput(index, i, event) {
    const values = [...sectionFields];
    values[index].videoContents[i][event.target.name] = event.target.value;
    setSectionFields(values);
    console.log(index, event.target.name)
}


const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Input Field ", sectionFields)
}

const handleRemoveFields = (index) => {
    const values = [...sectionFields];
    values.splice(index, 1)
    setSectionFields(values)
}

const handleAddFields = () => {
    setSectionFields([...sectionFields, {
        sectionName: '',
        overview: '',
        videoContents: [{videoName: '', videoUrl: ''}]
    }])
}

return (
    <div className='container mb-5'>
        <Container>
            <h1>Add New Member</h1>
            <form className={classes.root} onSubmit={handleSubmit}>
                {sectionFields.map((inputField, index) => (
                    <div key={index}>
                        <TextField
                            name="sectionName"
                            label="Section Name"
                            variant="filled"
                            value={inputField?.sectionName}
                            onChange={event => handleChangInput(index, event)}
                        />
                        <TextField
                            name="overview"
                            label="Section Overview"
                            variant="filled"
                            value={inputField?.overview}
                            onChange={event => handleChangInput(index, event)}
                        />

                        <IconButton onClick={() => handleRemoveFields(index)}>
                            <RemoveIcon/>
                        </IconButton>
                        <IconButton onClick={handleAddFields}>
                            <AddIcon/>
                        </IconButton>

                        {inputField?.videoContents?.map((v, i) => (
                            <div key={i}>
                                <TextField
                                    name="videoName"
                                    label="Enter Video Name"
                                    variant="filled"
                                    value={v.videoName}
                                    onChange={event => handleChangVideoInput(index, i, event)}
                                />
                                <TextField
                                    name="videoUrl"
                                    label="Enter Video Url"
                                    variant="filled"
                                    value={v.videoUrl}
                                    onChange={event => handleChangVideoInput(index, i, event)}
                                />
                                
                            </div>
                        ))}
                    </div>
                ))}
                <Button
                    className={classes.button}
                    variant='contained'
                    color='primary'
                    type='submit'
                    endIcon={<Icon/>}
                    onClick={handleSubmit}
                >
                    SEND
                </Button>
            </form>
        </Container>
    </div>

);
}
export default CreateCourse;

Output in Screenshot

when i click on plus icon creates a new input like

But I want one sectionName has many videoName and videoUrl like I want to create plus icon on the videoUrl side and when user clicks plus icon, it creates many videoName and videoUrl as many as user wants and if user clicks section then it creates one section row with one video row. How can I solve this using react?

GalAbra · Accepted Answer · 2021-09-11 15:51:04Z

1

First of all, when you use the current value of a state in order to calculate the new state value, it's preferable to use a callback function. This way it's not influenced by re-renders and guarantees the calculation uses the most updated state value.

So assuming you have

const [state, setState] = useState([]);

Don't use:

const next = [...state, newElement];
setState(next);

But instead, use:

setState((previous) => [...previous, newElement]);

In order to add more fields into a nested array, you can update the state like this:

function addToSection(i) {
  setSectionFields((prev) => (
    const updatedSection = {
      ...prev[i],
      videoContents: [
        ...prev[i].videoContents,
        { videoName: '', videoUrl: '' },
      ],
    };
    return prev.map((section, index) => {
      return index === i ? updatedSection : section;
    });
  );
}

edited Sep 11, 2021 at 15:51

answered Sep 11, 2021 at 12:41

GalAbra

5,1585 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Partho Over a year ago

there is no issue in my code i just want to add extra functionality which i couldn't

Partho · Accepted Answer · 2021-09-12 16:56:35Z

After many hours of trying finally i did it and thanks to @GalAbra , he saves my lot of time and i post this because if it helps to anyone

import React, {useState} from "react";
import Container from "@material-ui/core/Container";
import {TextField} from "@material-ui/core";
import Icon from "@material-ui/icons/Send";
import {makeStyles} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import RemoveIcon from '@material-ui/icons/Delete';
import AddIcon from "@material-ui/icons/Add";

 const useStyles = makeStyles((theme) => ({
  root: {
    '& .MuiTextField-root': {
        margin: theme.spacing(1)
    },
 },
 button: {
    margin: theme.spacing(1)
 }}))

function CreateCourse() {

const classes = useStyles();

const [sectionFields, setSectionFields] = useState([{
    sectionName: '',
    overview: '',
    videoContents: [{
        videoName: '', videoUrl: ''
    }]}])


function handleChangInput(index, event) {
    const values = [...sectionFields];
    values[index][event.target.name] = event.target.value;
    setSectionFields(values);
}

function handleChangVideoInput(index, i, event) {
    const values = [...sectionFields];
    values[index].videoContents[i][event.target.name] = event.target.value;
    setSectionFields(values);
    console.log(index, event.target.name)
}


const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Input Field ", sectionFields)
}

const handleRemoveFields = (index) => {
    const values = [...sectionFields];
    if(index > 0) values.splice(index, 1)
    setSectionFields(values)
}

const handleRemoveVideoFields = (index, i) => {
    const values = [...sectionFields];
    if(i > 0)
    values[index].videoContents.splice(i, 1)
    setSectionFields(values)
}


const handleAddFields = (index) => {
    setSectionFields((prevState => (
        [...prevState, {
            videoContents: [{videoName: '', videoUrl: ''}]
        }]
    )))
}

const handleAddVideoFields = (i) => {
    setSectionFields(prev => {
        const updatedSection = {
            ...prev[i],
            videoContents: [
                ...prev[i].videoContents,
                {videoName: '', videoUrl: ''},
            ],
        };
        return prev.map((section, index) => {
            return index === i ? updatedSection : section;
        });
    })
}


return (
    <div className='container mb-5'>
        <Container>
            <form className={classes.root} onSubmit={handleSubmit}>
                {sectionFields.map((inputField, index) => (
                    <div key={index}>
                        <p className='mb-0 mt-3 ml-2'>Enter Section Name</p>
                        <TextField
                            name="sectionName"
                            label="Section Name"
                            variant="filled"
                            value={inputField?.sectionName}
                            onChange={event => handleChangInput(index, event)}
                        />
                        <TextField
                            name="overview"
                            label="Section Overview"
                            variant="filled"
                            value={inputField?.overview}
                            onChange={event => handleChangInput(index, event)}
                        />

                        <IconButton onClick={() => handleRemoveFields(index)}>
                            <RemoveIcon/>
                        </IconButton>
                        <IconButton onClick={() => handleAddFields(index)}>
                            <AddIcon/>
                        </IconButton>

                        {inputField?.videoContents?.map((v, i) => (
                            <div key={i}>
                                <TextField
                                    name="videoName"
                                    label="Enter Video Name"
                                    variant="filled"
                                    value={v.videoName}
                                    onChange={event => handleChangVideoInput(index, i, event)}
                                />
                                <TextField
                                    name="videoUrl"
                                    label="Enter Video Url"
                                    variant="filled"
                                    value={v.videoUrl}
                                    onChange={event => 
                           handleChangVideoInput(index, i, event)}
                                />

                                <IconButton onClick={() => 
                                    handleRemoveVideoFields(index, i)}>
                                    <RemoveIcon/>
                                </IconButton>
                                <IconButton onClick={() => 
                                 handleAddVideoFields(index)}>
                                    <AddIcon/>
                                </IconButton>
                            </div>
                        ))}
                    </div>
                ))}
                <Button
                    className={classes.button}
                    variant='contained'
                    color='primary'
                    type='submit'
                    endIcon={<Icon/>}
                    onClick={handleSubmit}
                >
                    SEND
                </Button>
            </form>
        </Container>
    </div>

);
}
export default CreateCourse;

Collectives™ on Stack Overflow

How to add child array input field dynamically in React JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related