score:1
you are not passing the id in categories.jsx. either you can set the id in the history state or do pass it by component prop drill.
setting the state in history programmatically set params in react router v4
or you can do pass the id to the component and handle in component didmount event.
categories.jsx
/** create a id variable in state. **/
class categories extends component {
constructor(props) {
super(props);
this.state = {
categories: [],
isloaded: false,
error: null,
isopen: false,
--> id: null <--
};
}
/** change the openmodal code to something like this. **/
openmodal = (id) => {
this.setstate( (prev) => {
const state = prev.state;
return { ...state, id: id, isopen:true };
});
};
/** while onclick set the id in the state. **/
<datatable>
<table classname="table table-striped my-4 w-100">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>url (slug)</th>
<th></th>
</tr>
</thead>
<tbody>
{categories.map((category) => (
<tr key={category.id}>
<td>{category.id}</td>
<td>{category.title}</td>
<td>{category.slug}</td>
<td>
<button
classname="float-right mr-2"
variant="primary"
--> onclick={() =>this.openmodal(category.id)}
>
modal edit
</button>
</td>
</tr>
))}
</tbody>
</table>
</datatable>
/** pass the id prop for categoryform component in modal body from the state. **/
<modal show={this.state.isopen} onhide={this.closemodal} >
<modal.header closebutton>
<modal.title>adicionar / editar</modal.title>
</modal.header>
<modal.body>
--> <categoryform id={this.state.id || null} />
</modal.body>
<modal.footer>
<button variant="secondary" onclick= {this.closemodal}>
close
</button>
</modal.footer>
</moddal>
categoryform.jsx
in the componentdidmount conditionally check if there is id variable in props.
componentdidmount() {
**// check if props.id is available**
if (** this.state.category.id || this.props.id **) {
**const id = this.state.category.id || this.props.id;**
api.getcategory(id).then((response) => {
const [error, data] = response;
if (error) {
this.setstate({
errors: data
});
} else {
alert(id);
this.setstate({
category: data,
errors: []
});
}
});
}
}
score:1
you can add more state to categories
to keep track of additional data about the modal.
*i have only included the highlights in the code here; lots was left out for brevity.
in categories.jsx
:
constructor(props) {
super(props)
this.state = {
categories: [],
isloaded: false,
error: null,
isopen: false,
modaldata: null,
}
}
openmodal = (modaldata) => this.setstate({ isopen: true, modaldata });
closemodal = () => this.setstate({ isopen: false, modaldata: null });
//'create' dialog button
<button classname="float-right" variant="primary" onclick={e => this.openmodal({modaltype: 'create'})}>
adicionar
</button>
//here are the table rows:
{categories.map(category => (
<tr key={category.id}>
<td>{category.id}</td>
<td>{category.title}</td>
<td>{category.slug}</td>
<td>
<button classname="float-right mr-2" variant="primary" onclick={e => this.openmodal({modaltype: 'edit', categoryid: category.id})}>
modal edit
</button>
</td>
</tr>
))}
//the modal. pass modaldata as a prop:
<modal show={this.state.isopen} onhide={this.closemodal}>
<modal.header closebutton>
<modal.title>adicionar / editar</modal.title>
</modal.header>
<modal.body>
<categoryform modaldata={modaldata} />
</modal.body>
<modal.footer>
<button variant="secondary" onclick={this.closemodal}>
close
</button>
</modal.footer>
</modal>
in categoryform.jsx
:
//get id from props:
getcategoryid(props) {
return (props.modaldata.modaltype === 'edit') ? props.modaldata.categoryid : false;
//i don't know if this needs to be here:
//try {
// return props.match.params.id
//} catch (error) {
// return null
//}
}
you might have to refactor categoryform.jsx
. for instance, the categoryid is now a prop, so it doesn't need to be duplicated in state.
Source: stackoverflow.com
Related Query
- Use react modal bootstrap to edit items in a map list
- How to use Bootstrap Modal inside map function in React Js to render indivisual elements?
- How could I use map to render a list of items but grouped at every 3 items?
- Rendering list items using map in React
- Use styled-components to center React Bootstrap Modal
- Open modal on a list of items with modals in React
- Unable to use div components with bootstrap classes inside map function in react
- How do I use React Modal with a map function?
- Use Bootstrap Modal in React
- map an array with index keys to return a list of items react JS
- Why Map value are not displaying inside modal body in react bootstrap
- Reload a List after Edit a Item in React with a modal box - pass functions from one component to other
- react bootstrap carousel Items "Each child in a list should have a unique "key" prop"
- I can't figure out how to edit array items using a map function in React
- How do I get my react app to display object information in my bootstrap modal when they click on a list item?
- How to use materialize css grids or react bootstrap grids to show 3 items in each row from a mapped out response in ReactJS?
- Can I use React Bootstrap with Next.js?
- react bootstrap modal not showing
- React Bootstrap Validation use validated input in sub component
- Use Bootstrap 4 with React
- In React Native, How Can I Use KeyboardAvoidingView with a Modal in iOS?
- Closing a react bootstrap modal with escape key
- autoFocus on input when opening modal does not work - React Bootstrap
- Add active class on a map items react
- React modal always take the last element of map function
- How can I use bootstrap in react with rails
- How to edit react bootstrap table and save data after editing
- How to a use bootstrap grid for an array created by a map method in react?
- Change items in list in React when an item has been clicked
- How to dynamically show/hide a list of items in react
More Query from same tag
- Password validation in reactjs
- Ignore flowtype error when using specific pattern
- Jest + Enzyme tests written in CoffeeScript
- Data pushed to array in existing object with axios
- How do I close upon button click of a rendered component in react?
- redirect all `*` to specific path in nextjs
- Dynamic tabIndex attribute in JSX + React
- React-Router dose not work while using BrowserRouter after Build
- Unsplash API triggering download
- Do functions not update React hooks (particularly useState) depending on how they are called?
- Typescript error after update of react and react-dom
- GitHub pages link returns blank page for React app
- How to implement a forward ref in React0.14?
- I have React application running in ASP.NET Core project and want to run both at the same time
- Table Row Update/Remove Data in State(Array) and Toggle Add/Remove Class in React
- React component not re-rendering to grab Firebase data
- How to create multiple react native apps with same functionality
- Post and put checkbox to webapi in reactjs
- react filter eslint error: unexpected block statement surrounding arrow body
- Webpack error when trying to use styled-components
- redux-logger not showing action names suddenly only "object, object"
- Pass variable with Link React Router Dom
- What is node => {this.node = node } in React
- Setting values from radio buttons generated with map in react js
- this.props.location ends up being undefined in my component
- How to render a nested array?
- ReactJS: Select with default value from props without onChange event?
- How can I add a limit to draggable area?
- Keep updating markers on map on top of an overlay image - google maps react
- Validating Mobile number using React - validator library