Scribd
Upload
5 views

add-jsx

Uploaded by

Prasad Uppar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

add-jsx

Uploaded by

Prasad Uppar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Add.

jsx in client

Importing necessary dependencies:

javascriptCopy code

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';

import axios from 'axios';

Import React and other necessary modules:


useState is a React hook used to manage state within functional components.
useNavigate is a hook provided by React Router for programmatic navigation.
axios is a popular library for making HTTP requests.

Defining the Add functional component:

javascriptCopy code

const Add = () => {

// ...

};

This code defines the Add component as a functional component.

Initializing state using the useState hook:

javascriptCopy code

const [book, setBook] = useState({

title: '',

desc: '',

cover: '',

});

It initializes a state variable named book with an object containing properties for the book's title,
description, and cover image.
setBook is a function used to update the state.

Using the useNavigate hook to get the navigation function:

javascriptCopy code
const navigate = useNavigate();

useNavigate is used to obtain a navigation function that can be used to programmatically navigate
to different routes in the application.

Handling input changes with the handleChange function:

javascriptCopy code

const handleChange = (e) => {

setBook((prev) => ({ ...prev, [e.target.name]: e.target.value }));

};

This function is called when an input field's value changes.


It updates the book state object by spreading its previous values and setting the changed property
(determined by e.target.name) to the new value (e.target.value).

Handling the form submission with the handleClick function:

javascriptCopy code

const handleClick = async (e) => {

e.preventDefault();

try {

await axios.post('http://localhost:8800/books', book);

navigate('/');

} catch (err) {

console.log(err);

};

This function is called when the "Home" button is clicked.


It prevents the default form submission behavior (preventing the page from reloading).
It uses Axios to make a POST request to the server at "http://localhost:8800/books" with the book
data.
Upon a successful request, it uses the navigate function to navigate back to the home page ("/").
If there is an error, it logs the error to the console.

Rendering JSX for the component:

javascriptCopy code

return (

<div className='form'>
<h1>add product</h1>

<input type='text' placeholder='title' onChange={handleChange} name='title' />

<input type='desc' placeholder='desc' onChange={handleChange} name='desc' />

<input type='cover' placeholder='cover' onChange={handleChange} name='cover' />

<button onClick={handleClick}> Home</button>

</div>

);

This section defines the component's UI using JSX.


It renders a form with input fields for the book's title, description, and cover image.
The onChange event of each input field is set to the handleChange function, allowing real-time
updates of the book state.
There's a "Home" button that, when clicked, triggers the handleClick function for submitting the
form.

Exporting the Add component as the default export:

javascriptCopy code

export default Add;

This line exports the Add component as the default export of the module, making it available for
use in other parts of the application.

In summary, this code defines a React component for adding a book to the application. It captures user
input, sends a POST request to the server when the form is submitted, and handles navigation to the home
page upon success.

You might also like