How to update data with props in react with hooks?
Data update with useState and props example: If you want
create repeated profile box or any other details box then use props and
useState() react hooks. When you will fill data and click on the submit button
then you will found your filled data will be added as repeated box. For the
details follow my instruction:-
Need to create component and handle form data from the props and change handler function you can understand with this below example:
Profileform.js
import React, { useState } from 'react';
export default ({ onAddNewProfile, onCancel }) => {
const [profileTitle, setProfileTitle] = useState();
const [profiletext, setProfiletext] = useState();
const [profiledate, setProfiledate] = useState();
const titleChangeHandler = (event) => {
setProfileTitle(event.target.value);
}
const textChangeHandler = (event) => {
setProfiletext(event.target.value);
}
const dateChangeHandler = (event) => {
setProfiledate(event.target.value);
}
const submitHandler = (event) => {
event.preventDefault();
const formData = {
proTitle: profileTitle,
proText: profiletext,
proDob: profiledate,
}
onAddNewProfile(formData);
setProfileTitle('');
setProfiletext('');
setProfiledate('')
}
return (
<>
<h3>Add New card</h3>
<form onSubmit={submitHandler}>
<div className="row">
<div className="col-lg-5 mb-3">
<label className="form-label">Profile Title</label>
<input type="text" className="form-control"
value={profileTitle} onChange={titleChangeHandler} />
</div>
<div className="col-lg-5 mb-3">
<label className="form-label">Profile text</label>
<input type="text" className="form-control"
value={profiletext}
onChange={textChangeHandler} />
</div>
<div className="col-lg-5 mb-3">
<label className="form-label">Profile Joining years</label>
<input type="text" className="form-control"
value={profiledate}
onChange={dateChangeHandler} />
</div>
<div className="col-lg-5 mb-3">
<button type="button" className="btn btn-danger"
onClick={onCancel}>Cancel</button>
<button type="submit"
className="btn btn-primary">Add New Card</button>
</div>
</div>
</form>
</>
)
}
myprofile.js
import { useState } from 'react'
import { Col, Card, Container, Row } from 'react-bootstrap'
import Profilefilter from './profilefilter'
export default ({ profiledataList }) => {
const [filteredYear, setfilteredYear] = useState('0');
const filterChangeHandler = (selectedYear) => {
setfilteredYear(selectedYear);
}
const filteredDataYears = profiledataList.filter((yearss) => {
return yearss.proDob === filteredYear;
});
const renderProfileDataList = () => {
return (filteredYear === '0' ? profiledataList : filteredDataYears)
.map((item, i) =>
<Col lg="4" className="mb-3">
<Card key={Math.random().toFixed()}>
<Card.Body>
<Card.Title>{item.proTitle}</Card.Title>
<Card.Text>{item.proDob}</Card.Text>
<Card.Text>{item.proText}</Card.Text>
</Card.Body>
</Card>
</Col>
)
}
return (
<>
<Container>
<Row className="mb-4">
<Profilefilter selected={filteredYear}
onChangeFilter={filterChangeHandler} />
</Row>
</Container>
{renderProfileDataList()}
</>
)
}
profile.data.js
import React, { useState } from 'react';
import { Col, Container, Row } from 'react-bootstrap'
import Myprofile from './myprofile';
import Profileform from './profileform';
import './profile.css'
export default () => {
const profileDataLists = [
{
proTitle: 'Card Title 1',
proDob: '1999',
proText: '11111111111 Some quick example the bulk ofthe card\'s content.'
},
{
proTitle: 'Card Title 2',
proDob: '2021',
proText: '22222 Some quick ex title ae up the bulk ofthe card\'s content.'
},
{
proTitle: 'Card Title 3',
proDob: '1991',
proText: '3333333 Some quick example on the card title a333333333 ontent.'
}
]
const [profileData, setProfileData] = useState(profileDataLists);
const proChangeHandlers = (profile) => {
setProfileData((preProfile) => {
return [profile, ...preProfile]
})
}
const [isEdditing, setIsEdditing] = useState(false);
const startEditingHandler = () => {
setIsEdditing(true);
}
const stopEditingHandler = () => {
setIsEdditing(false);
//console.log('stop')
}
return (
<>
<Container className="newCardSection">
<Row>
<Col>
{!isEdditing && <div className="text-center">
<button className="btn btn-primary"
onClick={startEditingHandler}>Add new card</button></div>}
{isEdditing && <Profileform
onAddNewProfile={proChangeHandlers}
onCancel={stopEditingHandler} />}
</Col>
</Row>
</Container>
<Container>
<Row>
<Myprofile profiledataList={profileData} />
</Row>
</Container>
</>
)
}
profilefilter.js
export default (props) => {
const selectChangeHandler = (event) => {
props.onChangeFilter(event.target.value)
}
return (
<>
<hr />
<div className="col"><h4 className="text">Years wise filter</h4></div>
<div className="col">
<select className="form-control"
onChange={selectChangeHandler}>
<option value="0" selected>Select All Years</option>
<option value="1991">1991</option>
<option value="1999">1999</option>
<option value="2021">2021</option>
</select>
</div>
<hr />
</>
)
}
profile.css
.newCardSection{
padding: 20px;
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 40px;
}
app.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ProfileData from './components/usestatehooks/profile.data';
function App() {
return (
<>
<h1 className="text-center">Data update with useState and props.</h1>
<hr />
<ProfileData />
</>
);
}
export default App;
Collapse in react example screenshot below:
Filter in react example screenshot below:
No comments:
Note: Only a member of this blog may post a comment.