score:1
Accepted answer
i believe the issue is that you are providing an async function for your cell, which will return a promise
, not the institution name as you are expecting.
a potential solution is to instead create a custom cell component that uses state to store the institution name. i have provided an example below, which was guided by this example, however i have not tested the code at all, so use it as more of a guide.
const mycell = ({ cell }) => {
const [institutionname, setinstitutionname] = usestate('fetching...')
useeffect(() => {
const getinstitutionname = async (id) => {
const response = await getinstitutionbyid(id);
const result = [response.data];
const inst = result.map((inst) => {return inst.name});
const institution_name = inst[0];
console.log(institution_name);
setinstitutionname(institution_name)
}
getinstitutionname(cell.row.values.institution_id)
}
return institutionname
}
const contacts = ({ match }) => {
const [data, setdata] = usestate([]);
const [institution, setinstitution] = usestate();
const datarecoil = userecoilvalue(contactdata);
const handlecontact = usecallback(async () => {
const response = datarecoil.data;
if (response) {
setdata(response.filter((contact) => !contact.deleted));
}
}, [setdata, datarecoil]);
useeffect(() => {
handlecontact();
}, [handlecontact]);
const columns = usememo(
() => [
{
header: 'nome',
accessor: 'name',
},
{
header: 'sigla',
accessor: 'abbreviation',
},
{
header: 'nome fantasia',
accessor: 'institution_id',
cell: mycell
},
],
[edittoggle, handledelete],
);
return (
<>
<table columns={columns} data={data} />
</>
);
};
Source: stackoverflow.com
Related Query
- In react-table with React Hooks, how to make a get request inside Cell?
- How to make AJAX GET request on the client to external site with React
- How to update with React Hooks specific value of an array inside an object?
- how do I make a post and get request with ReactJS, Axios and Mailchimp?
- How can I make a request to an API based on the response from another request? React Hook "useSwr" cannot be called inside a callback
- How to make react data grid table cell editable and focused on click of a button without performing a double click action
- How to resize columns with React Table Hooks with a specific table width
- How to make a loop request with React using Axios?
- How can I make an axios get request wait before rendering my react component
- React hooks pagination with useEffect - how to revert page number if request fails?
- How can I make react render the new state modifications after I have updated the state with hooks and context
- How to get location pathname with React Router v5 and Hooks in React v16.13.1?
- How to use a custom React hook to make a POST or DELETE request with Axios
- How to make react table cell components communicate?
- How to convert a React class component to a function component with hooks to get firebase data
- How to make POST request with axios and React State Hook
- How do I embed a dynamic Dropdown menu inside a table cell in React JS?
- How to make one element span the whole cell in React Table
- How to make GET request with MERN Stack
- React - How to get the value of the hooks inside the context
- How to manipulate the DOM inside of map function using onChange event on one of the checkboxes with react hooks
- How to get a cell value from an html table to use in an axios request in reactjs?
- How to Make A second API call based on the value gotten from the first. with React and useEffect hooks
- How to fill users variable with data from GET request in React
- Is this the correct way to make an axios GET request with react redux?
- How to get full control styling for data table from DevExtreme React Grid with material-ui?
- How to send request on click React Hooks way?
- How to implement Error Boundary with React Hooks Component
- How to focus something on next render with React Hooks
- How to mock history.push with the new React Router Hooks using Jest
More Query from same tag
- "Dynamic" image sometimes resizes to zero - MaterializeCSS Carousel
- React - function not executing
- destructing alternatives for hooks
- Error while npm run build? eslint package error
- How to implement Elasticsearch update_by_query that change the value of Boolean field using react button onClick
- Create function componente HOC with typescript
- How to get multiple static contexts in new CONTEXT API in React v16.6
- Is the following form of functional components valid?
- Looping Scroll View in react native
- ReactJS input type="number" only responds to spinner buttons, not manual input
- Material UI ClickAwayListener close when clicking itself
- browserify loading ReactJS twice with react-router
- How to switch between sibiling in react
- How can I redirect all clients to another page with socket.io?
- Redux action to reset - states are equal
- How does redux saga trigger next with in a function
- React native layout fixed width and stretch remaining space
- Unable to pass parent methods to child components in React
- How reliable are MUI Global Class names in JSS?
- How to build and deploy ReactJs using docker-compose
- How to handle multiple queries with React-Query
- Redux Saga & Redux Toolkit watcher problem
- Is there a way to change the color of the layout in PopOver
- What are the types of react-hook-form methods?
- I want to upload a image and add URL of the image to firestore
- Fix TextField Alignment in React
- Why does React.StrictMode break calculating a diff of props/state?
- Simple React component throwing "too much recursion" error
- JWT Authentication system in webpage using nodejs
- Reactjs - How can I duplicate a prop?