How to render data added with form inputs?

Question

I am rendering information from API, but also I need to render new information added with webform. I made this form to add simple information as the object from the API. How can I render the data added from this form here?

function FormPage({ setData }) {
    const [name, setName] = useState('');
    const [description, setDescription] = useState('');
    const [id, setId] = useState(0);

    const handleSubmit = (e) => {
        e.preventDefault();
        const book= { name, description, id}


        fetch('link-from-api', {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(book)
        }).then(() => {
            console.log('new book added');            
        })
    }

    return (
        <>     
                    <form noValidate autoComplete="off" onSubmit={handleSubmit}>
                            <TextField
                                required
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                label="Name" />
                            <TextField
                                required
                                value={description}
                                onChange={(e) => setDescription(e.target.value)}
                                label="Description" />
                            <button type="submit" onClick={handleId}> set</button> 
                    </form>
        </>
    );
}

export default FormPage;

When I add a new book, I need to see it in this document:

function BooksPage() {
    const [books, setBooks] = useState([]);

    useEffect(() => {
        fetch('link here')
            .then(res => {
                return res.json();
            })
            .then((data) => {
                setBooks(data)
            })
    }, [])


    return (
        <Container>
            <Header />
            {books && 
            <ListBooks props={books} />}
        </Container>
    )
}

Can anyone help me? Thanks in advance.

Answer 1

You need to use the concept called lifting the state up here.

Define your state variable books in the common parent component of these two components FormPage and BooksPage

Pass this method to the component FormPage.

const addBook = (book) => {
  setBooks(b => [...b, book])
}

Call this method at

const handleSubmit = (e) => {
    e.preventDefault();
    const book= { name, description, id}


    fetch('link-from-api', {
        method: 'POST',
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(book)
    }).then(() => {
        console.log('new book added');
        addBook(book)          
    })
}

And pass books and setBooks to the page BooksPage.

Answer 2

You could move the fetch to a separate function and call again when POST is done

function BooksPage() {
    const [books, setBooks] = useState([]);

    function fetchBooks() {
        fetch('link here')
            .then(res => {
                return res.json();
            })
            .then((data) => {
                setBooks(data)
            })
    }

    useEffect(() => {
        fetchBooks();
    }, [])


    return (
        <Container>
            <Header />
            {books && 
            <ListBooks props={books} />}
            <FormPage fetchBooks={fetchBooks} />
        </Container>
    )
}

And in your form:

const handleSubmit = (e) => {
        e.preventDefault();
        const book= { name, description, id}


        fetch('link-from-api', {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(book)
        }).then(() => {
            console.log('new book added');
            // fetch again
            fetchBooks();            
        })
    }