I am new to front end world and could not figure out how to trigger a function from a sibling component. Lets say I have 2 component in App.js. The page is:
function App() {
return (
<div className="App">
<h1>Customer List</h1>
<MainPanel/>
<TableFooterPanel/>
</div>
);
}
MainPanel code is:
function MainPanel() {
const [customers, setCustomers] = useState([]);
useEffect(() => {
const fetchPostList = async () => {
const response = await service.getCustomerList();
setCustomers(response.data);
console.log(response.data)
};
fetchPostList()
}, []);
const deleteCustomer = (id) => {
service.deleteCustomerById(id);
}
return (
<ReactBootStrap.Table striped bordered hover>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{customers &&
customers.map((item) => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td><Button onClick={() => deleteCustomer(item.id)} ><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
</tr>
))}
</tbody>
</ReactBootStrap.Table>
);
}
export default MainPanel;
And TableFooterPanel code is:
function TableFooterPanel() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const addNewCustomer = (name, surname) => {
service.addCustomer(name, surname);
}
return (
<>
<Card className='buttonFooter'>
<Form className='buttonFooter'>
<input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>
<input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input>
<Button onClick={() => addNewCustomer(firstName, lastName)}>Add</Button>
</Form>
</Card>
</>
);
}
export default TableFooterPanel;
What I want to do is, whenever I click button and send the customer info to backend to save then immediately call a function in MainPanel to set it's table data and update the table immediately after adding. Something like, I want to click button and add it and if response is success then refresh the table (without refreshing whole page).
What is the best way to do that ?
In React we have one data flow. From parent to children, and there is no way to pass some information, from children to parent/sibling. What you want is called Lifting State Up
Just put necessary logic to parent component, here it will be the App component. In App component you will have a function which triggers table data loading, and when data will be loaded you should save it, also inside the App component. You will pass table data to MainPanel as prop. Then pass a that function from App component (which triggers table data loading) to your TableFooterPanel component and call it when onClick event happens.
I would introduce a component to hold both the table and the footer, and put the state in this component. Then you pass a function as a prop down to the footer component, which will update the table data. Then you pass the table data as props to the table component.
function Customers({initialData = []}) {
const [customers, setCustomers] = useState(initialData);
return (
<div>
<h1>Customers</h1>
<CustomerTable customers={customers} />
<TableFooter addCustomer={(customer) => setCustomers([...customers, customer])} />
</div>
)
}
By setting initialData to default to an empty array, you can rely on array methods like .map in the table component.
Related
I'm currently using child components which returns JSX.
//PARENT COMPONENT
import ApprovalTableElement from './E_Approval_Element.js';
//JSX of E_Approval_Element.js
const [approvalElement, setApprovalElement] = useState([ApprovalTableElement]);
//Add one more approval column
const addApprovalSpace = () => {
setApprovalElement([...approvalElement, ApprovalTableElement]);
};
return (
<div className={styles['EApprovalWriteDiv']}>
<div className={styles['authDiv']}>
{approvalElement.map((element, index) => (
<button>DELETE ONE APPROVAL SECTION</button>
<ApprovalTableElement index={index} />
))}
</div>
</div>
);
};
export default E_Approval_Write;
//CHILD COMPONENT
function ApprovalTableElement() {
return (
<>
<table className={styles['approvalTable']}>
<tbody className={styles['approval']}>
<tr className={styles['name']}>
<th>
<select style={{ marginLeft: 10 }}>
<option>선택</option>
<option>결재자</option>
<option>합의자</option>
</select>
</th>
</tr>
<tr className={styles['signature']}>
<td>
<div>SIGN</div>
</td>
</tr>
<tr className={styles['name']} onClick={memberModalTrigger}>
<td>
<Typography variant='button' display='block'>
</Typography>
</td>
</tr>
</tbody>
</table>
</>
);
}
export default ApprovalTableElement;
with this code, what I'm trying to do is using
{approvalElement.map((element, index) => (
<button>DELETE ONE APPROVAL SECTION</button>
<ApprovalTableElement index={index} />
))}
this button, deleting selected ApprovalTableElement.
right now, I have this UI. When I click + button, I keeps adding component. But when I click remove button, the table attached to the button should disappear. BUT not the other ones.
All I can know is the index of the Component, so I am really confusing on how to delete the targeted component using filter().
OR, should I add button tag inside the CHILD COMPONENT not the PARENT COMPONENT?
However, If I can make what I'm trying to do with this code, please tell me how to set up the code properly to make things possible. Thank you!
Just pick those which id is different from the one you are deleting
const removeApprovalSpace = (id) => {
setApprovalElement(items => items.filter(item => item.id !== id));
};
//usage
<button onClick={() => removeApprovalSpace(id)}>Remove</button>
If you don't have id's you can use index
const removeApprovalSpace = (index) => {
setApprovalElement(items => items.filter((item, i) => i !== index));
};
//usage
<button onClick={() => removeApprovalSpace(index)}>Remove</button>
I will apologize in advance for incorrect lingo, just started to code in Nov.
I am using this API (https://www.themealdb.com/api/json/v1/1/filter.php?i=)
to get idMeal, strMeal, strMealThumb from the objects, which is mapping over cards to populate different recipes. (Search Component)
I want the user to be able to click on it for them to go to another component that uses another API to populate the actual recipe( Recipe Component) with the id from the Search Component.
www.themealdb.com/api/json/v1/1/lookup.php?i=${idMeal}
Unsure how to proceed with this. Was thinking about using a React Router Link to jump to the other component, and need to make the idMeal into state to transfer from Search into Recipe.
Should I use Redux, Context or something else?
export default function Search() {
const [isSearched, setSearched] = useState("");
const [meals, setMeals] = useState([]);
const [isId, setId] = useState("");
const submitHandler = async (e) => {
e.preventDefault();
// console.log(isSearched);
const res = await axios.get(
`https://www.themealdb.com/api/json/v1/1/filter.php?i=${isSearched}`
);
setMeals(res.data.meals);
};
useEffect(() => {}, [meals]);
return (
<PageContainer>
<ForkSpoonImg src={forkspoon} />
<form onSubmit={submitHandler}>
<h2 style={{ textAlign: "center" }}>Please Search an Ingredient</h2>
<Input type="text" onInput={(e) => setSearched(e.target.value)}></Input>
<Button type="submit">
<SearchIcon />
</Button>
</form>
<CardContainter>
{meals.map(({ idMeal, strMeal, strMealThumb }, index) => {
return (
<Tag //<------- will change to Link, was just testing to see endpoint
href={`www.themealdb.com/api/json/v1/1/lookup.php?i=${idMeal}`}
key={index}
>
<Cards key={index} title={strMeal} url={strMealThumb} />
</Tag>
);
})}
</CardContainter>
</PageContainer>
);
}
Kindest Regards!
I have a simple app with 3 React components stacked on top of another:
function App() {
return (
<Fragment>
<div className="container">
<ListSuppliers/>
<InputContact/>
<ListContact/>
</div>
</Fragment>
);
}
In my ListSuppliers component I have a dropdown menu, in my InputContact component I have an input form, and in my ListContact I have an html table like so:
return <Fragment>
<h1>List Contact</h1>
<table className="table mt-5">
<thead>
<tr>
<th>Contact Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{contacts.map(contact => (
<tr key={contact.contact_id}>
<td>{contact.contact_name}</td>
<td><EditContact contact={contact}/></td>
<td><button className="btn btn-danger" onClick={()=> deleteContact(contact.contact_id)}>Delete</button></td>
</tr>
))}
</tbody>
</table>
</Fragment>
I want my html table in the ListContact component to be populated based on the selection from the menu in the ListSuppliers component:
//Select function
const chooseSupplier = async (id) => {
try {
const response = await fetch(`http://localhost:5000/contact_supplier/${id}`,{
method: "GET"
});
const jsonData = await response.json();
console.log(jsonData);
} catch (err) {
console.log(err.message);
}
}
//Route
app.get("/contact_supplier/:id", async (req, res) => {
try {
const {id} = req.params;
const contact = await pool.query('SELECT * FROM contact WHERE supplier_id = $1 ORDER BY contact_id ASC', [id]);
res.json(contact.rows);
} catch (err) {
console.error(err.message);
}
})
So far I am able to receive the query that I need in json format, however I'm not sure how to query from one component target to an object in another in this case.
You need to maintain the state in the parent component (here - App.js)
for const [state,setState] = useState() and then pass the state and setState to the children where they can access them and call them.
I have a component with a table that is loaded with the data sent by the REST API, my question more than anything, is if it is good to delete a row with remove () or deleteRow (index) entering the DOM or I have to manipulate the DOM through a state (useState) for good practice or something like that.
Additional info: I have gotten used to manipulating the DOM directly with pure javascript when making static web pages, but in React I think you have to use props, state, hooks to manipulate the DOM elements or am I wrong? there must be cases I guess.
DOM TRAVERSING
export default function App() {
const data = ['Eli','Smith', 'Jhon']
const handleDelete = (index,e) => {
//I can save an ID in <tr> through datasets (data-)
//to get it by traversing the DOM when the user clicks and delete it
//also in my database (API), that's Ok?
e.target.parentNode.parentNode.parentNode.deleteRow(index)
}
const rows = data.map((item, index) => {
return (
<tr key={index}>
<td>{item}</td>
<td><button onClick={e => handleDelete(index,e)}>Delete</button></td>
</tr>
)
})
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<table>
{rows}
</table>
</div>
);
}
That's OK ?
Or do I have to put the rows in a state (useState) and update it by removing the and re-rendering?
Best practice is to manage data through state, I would suggest not to do DOM manipulation manually
export default function App() {
const [data, setData] = useState(['Eli','Smith', 'Jhon']);
const handleDelete = (index,e) => {
setData(data.filter((v, i) => i !== index));
}
const rows = data.map((item, index) => {
return (
<tr key={index}>
<td>{item}</td>
<td><button onClick={e => handleDelete(index,e)}>Delete</button></td>
</tr>
)
})
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<table>
{rows}
</table>
</div>
);
}
use hook useState to save your data and after that with handlerDelete remove the element and set the data. React will re-render component (because your state has been changed) and you get necessary result:
https://codesandbox.io/s/cranky-surf-iykn7?file=/src/App.js
So guys, I've been working on my Landing and Dashboard page.
So workflow of the page is this:
User gets on Landing page where he can choose to insert into form location, or press a button to recive all locations. Now on the backend I've made two APIs one to get all locations, and second where I've added :location as req.body.param and then filter locations based on that param. And everything works fine in postman.
Now because I've got two ways of user getting locations(all of them or some that he wants) I've thinked that I place two useEffects inside if statement like this:
const filter = props.location.data;
if (filter) {
useEffect(() => {
const fetchFiltered = async () => {
const res = await ArticleService.filterByName(filter);
setContent(res.data);
};
fetchFiltered();
}, []);
} else {
useEffect(() => {
const fetchPosts = async () => {
const res = await ArticleService.articles();
setContent(res.data);
};
fetchPosts();
}, []);
}
So my logic behind this was if there is filter inside props.location execute me useEffect which gets data from ArticleService who then send filter inside of a api url. If there is no filter just retrieve me all data, and setContent to res.data.
But when I compiled the code error is this: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render
Is there some way of doing this with my logic or I need to create two components: one normal dashboard and second for filtered result?
Landing.js where user sends location
<Form>
<div className='form-group'>
<Input
type='text'
className='form-control text-center'
name='name'
placeholder='Enter desired location'
value={location}
onChange={onChangeLocation}
/>
<Link to={{ pathname: '/dashboard', data: location }}>
<i className='fas fa-check'></i>
</Link>
</div>
<p className='text-center'>or</p>
<Link className='btn btn-primary btn-block' to='/dashboard'>
Show all locations
</Link>
</Form>
Dashboard.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Pagination from 'react-js-pagination';
import ArticleService from '../../services/article.service';
const Dashboard = (props) => {
const [content, setContent] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(10);
const filter = props.location.data;
if (filter) {
useEffect(() => {
const fetchFiltered = async () => {
const res = await ArticleService.filterByName(filter);
setContent(res.data);
};
fetchFiltered();
}, []);
} else {
useEffect(() => {
const fetchPosts = async () => {
const res = await ArticleService.articles();
setContent(res.data);
};
fetchPosts();
}, []);
}
let counter = content.length;
// Get current posts
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = content.slice(indexOfFirstPost, indexOfLastPost);
// Change page
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};
const render = (item, index) => {
return (
<tr key={index}>
<td className='text-center'>
<div key={item.id}>
<img
src={`${item.pictures}`}
alt='slika artikla'
className='rounded'
></img>
</div>
</td>
<td className='text-center'>
<div key={item.id}>
<h4>{item.descr}</h4>
<br></br>
<h6 className='text-left'>Number of m2: {item.sqm}m2</h6>
<div className='text-left'>
<small className='text-left'>
{' '}
<a href={item.link} target='_blank' rel='noopener noreferrer'>
Show on website
</a>
</small>
</div>
</div>
</td>
<td className='text-center'>
<div key={item.id}>
<h4>{item.price}</h4>
<small className='text-left'>Price per m2: {item.ppm2}</small>
</div>
</td>
<td className='text-center'>
<div key={item.id}>
<Link to={`/article/${item.id}`}>
<h4>Show</h4>
</Link>
</div>
</td>
</tr>
);
};
return (
<div>
<div className='container'>
<h4 className='text-center'>
Number {counter}
</h4>
<div className='table-responsive'>
<table className='table'>
<thead className='thead-dark'>
<tr>
<th className='text-center' scope='col'>
Pic
</th>
<th className='text-center' scope='col'>
Description
</th>
<th className='text-center w-25' scope='col'>
Price
</th>
<th className='text-center' scope='col'>
Show offer
</th>
</tr>
</thead>
<tbody>{currentPosts.map(render)}</tbody>
</table>
</div>
</div>
<nav>
<div className='w3-bar w3-xlarge'>
<ul className='pagination justify-content-center'>
<li className='page-item'>
<Pagination
hideDisabled
hideNavigation
hideFirstLastPages
currentPage={currentPage}
itemsCountPerPage={10}
totalItemsCount={content.length}
pageRangeDisplayed={indexOfLastPost}
onChange={handlePageChange}
/>
</li>
</ul>
</div>
</nav>
</div>
);
};
export default Dashboard;
Thanks! :D
Basic answer, no, you cannot conditionally call useEffect. You must put the conditional logic inside the useEffect callback.
const filter = props.location.data
useEffect(() => {
if (filter) {
const fetchFiltered = async () => {
const res = await ArticleService.filterByName(filter)
setContent(res.data)
}
fetchFiltered()
} else {
const fetchPosts = async () => {
const res = await ArticleService.articles()
setContent(res.data)
}
fetchPosts()
}
}, [filter, setContent, ArticleService.filterByName, ArticleService.articles])
Hooks in React do not really follow the standard rules of javascript. There are performance reasons around the way they have to be implemented, often some caching is done to stop excess code being executed every time a render pass is done.
The useEffect hook will only run its callback function during a render where one of the values in the dependency array (the second arg of useEffect) has changed. It's standard to put in all external values that could change. Thus when the value of filter changes, the app will rerender, the useEffect will do a comparision, realise that something has changed and run it's call back again which will then perform the if statement.
You can read more about this in the performance part of the docs
In addition to the above answer,from the official documentatation
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.