score:0
export default function deleteproductsform() {
const initialstate = {
idaddproducts: "",
productname: "",
productid: "",
productbrand: "",
productquantity: "",
productprice: "",
producttype: ""
};
const [values, setvalues] = react.usestate(initialstate);
const handlename = e => {
const idaddproducts = e.target.value;
console.log(idaddproducts);
e.preventdefault();
setvalues({ ...values, [e.target.name]: idaddproducts });
handlelist1(idaddproducts);
console.log(values);
};
const handlen = e => {
const idaddproducts = values.idaddproducts;
console.log(idaddproducts);
e.preventdefault();
setvalues({ ...values, [e.target.name]: idaddproducts });
handlelist(idaddproducts);
console.log(values);
};
async function handlelist1(idaddproducts) {
const res = await fetch(
"http://localhost:4000/productslist/" + idaddproducts
);
const data = await res.json();
setvalues(data.data);
console.log(data.data);
}
useeffect(() => {
handlelist1();
}, []);
async function handlelist(idaddproducts) {
const res = await fetch(
"http://localhost:4000/productslist/delete/" + idaddproducts
);
const data = await res.json();
setvalues(data.data);
console.log(data.data);
}
useeffect(() => {
handlelist();
}, []);
const classes = usestyles();
return (
<form classname={classes.root} novalidate autocomplete="off" align="center">
<div classname={classes.formgroup}>
<formcontrol>
<input
type="search"
label="product id"
variant="outlined"
size="small"
placeholder="enter product code"
value={values.idaddproducts}
name="idaddproducts"
onchange={e => handlename(e)}
/>
</formcontrol>
<button onclick={e => handlen(e)}>click</button>
{values && values.length ? (
values.map(row => <h5 key={row.idaddproducts}>{row.productname}</h5>)
) : (
<h5>not found</h5>
)}
</div>
</form>
);
}
if i delete handlelist1 function it works fine.. but it wont display data
Source: stackoverflow.com
Related Query
- Delete a Row using Fetch API Use Effect - ReactJS
- Authenticate Users and use Graph API using Azure AD, ReactJS and NodeJS
- Fetch Foreign key object from an api using reactjs
- ReactJS app is unable to fetch data using REST API call
- Error 415 when call POST API using Fetch in ReactJS
- How do I use Distance Matrix API in ReactJS using @react-google-maps/api?
- Promise rejected in POST login using fetch API in reactjs and Nodejs
- Do i really need to use forceUpdate with fetch API and ReactJS
- How to delete each row using Reactjs and Redux
- Delete row from a table, deleteRow(id), remove() or use useState () in Reactjs
- How do I update Reactjs State with data I retrieved using a fetch API call?
- How do I fetch search results from multiple API using reactjs
- data.json is not a function reactjs using Fetch API
- How to fetch data from Microsoft Custom Vision API using ReactJS
- Showing JSON Data using fetch api and map in reactjs
- Using ReactJs to fetch data from an API but getting completely blank page with no errors
- Not able to fetch data from node.js API hosted on localhost using ReactJs
- How can I refresh datatable when I delete row from datatable with ReactJS without using Redux or Context?
- using axios-mock-adapter to test API call in use effect
- Using fetch API with mode: 'no-cors', can’t set request headers
- how to add row to a table using ReactJS on button click
- React: Fetch API getting 415 Unsupported Media Type using POST
- Use <code> or similar tags in ReactJS using JSX
- Post an object with fetch using react js and express API server
- Is there a way to use cdn files with reactjs using webpack?
- Request header not set as expected when using 'no-cors' mode with fetch API
- How to send POST data to flask using Reactjs fetch
- ReactJS good practices using Hooks and Redux. Should I use useSelector in each component, or I should pass via props?
- How to set timeout in Fetch API using react js
- CORS error using fetch API - React create app
More Query from same tag
- React.js fetch method on my api is not working?
- ReactJs print value of input field
- Strings concatenation in enum value
- JEST to test react components
- How to pass a props from one screen to another and display it?
- How to animate a sliding cart with react spring with a toggle button
- How to handle percentage sign in table names when fetching data
- How to integrate Flow type with Ant Design form?
- setState call inside a custom hook is not updating the state
- How to get prop values from reducer before render() is executed?
- npm run build not adding Spring Boot context path
- Reconnecting to socket channel after disconnection in react
- Set a Non-Root User by Dockerfile
- How to set API headers for different APIs?
- adding onclick to an array of items
- API receiving undefined data
- react useEffect hook cleanup
- Contact Form error message not visible in component
- How to select a DOM element in React
- navigating from a tab screen to a stack screen
- Is it possible to write text file then upload to google drive in react?
- React - get value of selected element
- getting error when I use destructuring assignment to simplify my props
- React does not re-render
- bind function in react component
- Jest Error: 'jest' is not recognized as an internal or external command, operable program or batch file
- layout component does not unmount on server side when children unmounted
- onCallback React Hook - best practice query
- How to use webpack devServer proxy in create react app
- React Typed Children with TypeScript