ReactJs dynamic input fields using with React Hooks
ReactJs dynamic input fields using with React Hooks
Venkat Nagaram
ReactJs dynamic input fields using with React Hooks
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import React, { useState } from 'react'; import { Button, Card, CardContent, Container, FormLabel, Grid, Stack, TextField, Typography } from '@mui/material'; import { Box } from '@mui/system'; const defaultData = { firstName: '', lastName: '' }; function App() { const [formInputs, setFormInputs] = useState([{ ...defaultData }]); const onChange = (e, index) => { const { name, value } = e.target; const data = [...formInputs]; data[index][name] = value; setFormInputs(data); }; const onAddClick = () => { setFormInputs([...formInputs, { ...defaultData }]); }; const onRemoveClick = (index) => { const data = [...formInputs]; data.splice(index, 1); setFormInputs(data) }; return ( <Stack alignItems='center'> <Typography component="h2" variant='h4' mb={5}> Add or Remove input fields dynamically with React Hooks </Typography> <Container maxWidth="md"> <Card variant='outlined'> <CardContent> <FormLabel component="legend">Enter name of colleague </FormLabel> { formInputs.map((element, index) => { return ( <Grid container spacing={2} key={index} alignItems='center'> <Grid container item xs={9}> <Grid item display='flex' width='100%'> <TextField label='First name' name='firstName' value={element.firstName} onChange={(e) => onChange(e, index)} margin='dense' fullWidth sx={{ mr: 1 }} /> <TextField label='Last name' name='lastName' value={element.lastName} onChange={(e) => onChange(e, index)} margin='dense' fullWidth /> </Grid> </Grid> <Grid item xs={3}> <Box display='flex' justifyContent='center' alignItems='center'> { formInputs.length - 1 === index && <Button variant="contained" size='small' sx={{ ml: 2 }} onClick={onAddClick}> Add </Button> } { formInputs.length > 0 && formInputs.length !== 1 && ( <Button variant="contained" size='small' color="error" sx={{ ml: 2 }} onClick={() => onRemoveClick(index)}> Remove </Button> ) } </Box> </Grid> </Grid> ) }) } <Box mt={5}> {JSON.stringify(formInputs)} </Box> </CardContent> </Card> </Container> </Stack> ); } export default App; |
Package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
{ "name": "new-repo", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/material": "^5.2.5", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } |
Source Code: https://stackblitz.com/edit/react-w3wrhq?file=src%2FApp.js
