how to render nested component together in reactjs using hooks

Question

i am trying to add and edit records through same form. It is working normal but on editing when i refresh the page, input value get wiped. As i have noticed, Component is rendering before it stores the value and useState is running at once, please guide to do so...

EditLink.js

    const EditLink = () => {
    const { id } = useParams()
    const { links, dispatch } = useContext(LinksContext)
    const link = links.find((link) => link.id === id)
    const addLink = (updates) => {
        database.ref(`links/${id}`)
            .set(updates)
            .then(() => {
                dispatch({
                    type: "EDIT_LINK",
                    id,
                    updates
                })
                history.push("/dashboard")
            })
            .catch((e) => {
                console.log("Link editing failed", e)
            })
    }
    const removeLink = () => {
        database.ref(`links/${id}`)
            .remove()
            .then(() => {
                dispatch({
                    type: "REMOVE_LINK",
                    id
                })
                history.push("/dashboard")
            })
    }

    return (
        <>
            <Container>
                <Alert variant="primary">
                    <h6 className="mb-0">Edit Link</h6>
                </Alert>
            </Container>
            <LinkForm link={link} addLink={addLink} removeLink={removeLink} />
        </>
    )
}

LinkForm.js

    export const LinkForm = ({ link, addLink, removeLink }) => {
    const [title, setTitle] = useState(!!link ? link.title : "")
    const [description, setDescription] = useState(!!link ? link.description : "")
    const [url, setUrl] = useState(!!link ? link.url : "")
    const [tags, setTags] = useState(!!link ? link.tags : "")
    const [error, setError] = useState('')

    const onSubmit = (e) => {
        e.preventDefault()
        if (!title || !url) {
            setError("Title and Url is compulsary")
        } else {
            const link = { title, url, description, tags }
            addLink(link)
        }
    }

    return (
        <Container>
            <Row className="justify-content-md-center">
                <Col md={6}>
                    {
                        error.length > 0 &&
                        <Alert variant="warning">
                            {error}
                        </Alert>
                    }
                    <Form onSubmit={onSubmit} >
                        <Form.Group >
                            <Form.Control
                                type="text"
                                id="title"
                                value={title}
                                onChange={(e) => setTitle(e.target.value)}
                                placeholder="Title"
                            />
                        </Form.Group>
                        <Form.Group >
                            <Form.Control
                                type="text"
                                id="url"
                                value={url}
                                onChange={(e) => setUrl(e.target.value)}
                                placeholder="URL"
                            />
                        </Form.Group>
                        <Form.Group >
                            <Form.Control
                                as="textarea"
                                rows="2"
                                id="description"
                                value={description}
                                onChange={(e) => setDescription(e.target.value)}
                                placeholder="Description"
                            />
                        </Form.Group>
                        <Form.Group >
                            <Form.Control
                                as="textarea"
                                rows="2"
                                id="tags"
                                value={tags}
                                onChange={(e) => setTags(e.target.value)}
                                placeholder="Tags"
                            />
                        </Form.Group>
                        <Form.Group as={Row}>
                            <Col sm={6} className="mb-1">
                                <Button variant="info" className="w-100" type="submit">Add </Button>
                            </Col>
                            {!!link &&
                                <Col sm={6}>
                                    <Button
                                        id="removeExpanse"
                                        variant="danger"
                                        className="w-100"
                                        onClick={removeLink}
                                    >Remove </Button>
                                </Col>}
                        </Form.Group>
                    </Form>
                </Col>
            </Row>
        </Container>
    )
}

please guide us..

score 0 · Answer 1 · answered May 24 '20 at 05:03

It is working normal but on editing when i refresh the page, input value get wiped.

Why do you expect the opposite to happen? When you refresh the page you're restarting the app. The way to persist the data across page reloads is to use the browser's localStorage.

how to render nested component together in reactjs using hooks

1 Answers1