Ads Top

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> &nbsp;&nbsp;
                        <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{
    padding20px
    background#f5f5f5;
    border1px solid #ccc;
    border-radius10px;
    margin-bottom40px;
}

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.

Copyright Reserved to Anything Learn. Powered by Blogger.