score:1
Accepted answer
do the following:
- maintain a state say
list
and store all your items - create
onclick
handlers for adding and removing items in the table - update the state when you add/remove
- iterate and render
this.state.list
- make sure to do
event.stoppropagation()
in the remove handler. this way your colour change functionality still works.
see here the implementation of adding and removing item
code snippet:
class table extends react.component {
constructor(props) {
super(props);
this.state = {
tablecolor: true,
list: []
};
this.handleclick = this.handleclick.bind(this);
}
handleclick() {
this.setstate({
tablecolor: !this.state.tablecolor
});
}
additem() {
this.setstate({ list: this.state.list.concat("item") });
}
removeitem(e, index) {
e.stoppropagation();
this.setstate({ list: this.state.list.filter((_, i) => index !== i) });
}
render() {
return (
<div classname="container">
<button onclick={this.additem} type="button">
add
</button>
<table>
{this.state.list.map((item, index) => {
return (
<tr>
<td
classname={this.state.tablecolor ? "trred" : "trblack"}
onclick={this.handleclick}
>
{item}
<div
onclick={e => this.removeitem(e, index)}
classname="innerdiv"
/>
</td>
</tr>
);
})}
</table>
</div>
);
}
}
score:0
this is one of the ways you can do it:
class table extends react.component {
constructor(props){
super(props)
this.state ={
rows:[{id:8,name:'item8',tableccolor:'trblack'}],
tablecolor: true
}
this.handleclick = this.handleclick.bind(this);
this.handleadd = this.handleadd.bind(this);
this.renderrows = this.renderrows.bind(this);
}
handleclick(clickedrow){
const {rows} = this.state;
let newrows = rows.map(row => {
if(row.id === clickedrow.id) {
row.tablecolor = 'trred'
return row
}
return row;})
this.setstate({rows:newrows})
}
handleadd() {
const {rows} = this.state;
const count = rows.length;
rows.push({id:count,name:count,tableccolor:'trblack'})
this.setstate({rows:rows})
}
renderrows() {
return this.state.rows.map(row => {
return (<tr>
<td classname={row.tablecolor}>
<div>{row.name}
<div onclick={() => this.handleclick(row)}
classname="innerdiv">
</div>
</div>
</td>
</tr>)
});
}
render(){
return (
<div classname="container">
<button type="button">add</button>
<table>
{this.renderrows()}
</table>
</div>
)
}
}
reactdom.render(<table />, document.queryselector("#app"));
Source: stackoverflow.com
Related Query
- how to add or remove tables dynamically in ReactJS
- How to dynamically add and remove mapped array to another array when clicked and remove from arr when clicked again in reactjs
- How to dynamically add and remove class on click with React?
- How to add and remove table rows Dynamically in React.js
- How can I dynamically add attributes to component in reactjs
- How can we remove an element dynamically in Reactjs
- How to create a canvas dynamically in reactjs and add refs dynamically?
- How to set CSS in the dynamically add button in Reactjs
- How to add elements to div dynamically in reactjs
- How to dynamically add and remove a set of togglebuttons mui react js
- How can I add and remove list of select box in reactjs
- How to add multiple classes to a ReactJS Component?
- How to dynamically add a class to manual class names?
- How to add a <br> tag in reactjs between two strings?
- How to add delay in Reactjs
- How to add "colSpan" attribute in ReactJS
- How to add or remove a className on event in ReactJS?
- How to add "refs" dynamically with react hooks?
- how to add row to a table using ReactJS on button click
- How to add external javascript file with reactjs
- ReactJS How to add a show more/show less button
- How to add reactjs animation library and Animate .css to animate
- Typescript & ReactJS How To Dynamically Set State
- How do I dynamically add an array to a react-bootstrap table?
- How to remove imported css in reactjs
- "material-table" - How to add more rows per page and fix rendering - ReactJs
- Is it too expensive to add and remove event listeners on every call of my React custom hook? How to avoid it?
- How to add components to list dynamically in React with no redundant render?
- How to add external JavaScript files in ReactJS
- How to add active class to clicked item in ReactJS
More Query from same tag
- Is it possible to use React Hooks outside of functional component, or i have to use mobx or redux?
- Why is a user able to login and have a json web token is issued even though user has entered incorrect password?
- Session timeout in React with modal
- React Hooks doesnt work between routes but works when refreshing
- How to optimize an API fetch to be less redundant
- React, Losing styles after array.map()
- React Native - iOS - Local image invisible (works on android)
- React update dom template after ajax call
- Show the previous content for 5 seconds even if the state updates?
- Array items sorting in javascript
- How to show message in react js
- how to rerender a component when hash change and change the state
- convert dateTime format in react js
- React redux First object missing on rendering when data is entered in the text field
- React keypress event taking only initial state values and not updated values
- React router4: update state at onClick Link component
- How to access a function of a child component in a unit test
- React middleware auth component with react router
- Getting null when I send file reactjs to express server
- React : Link to PDF which is in my project folder
- How to use 'this.props.params' in React?
- Pass a function of window.onload inside styled-components
- React arrow function undefined on definition
- React Formik - not submitting form
- React-redux cross access state value
- How separate between days on the week view with fullcalendar react?
- Close detail panel and open another on material-table
- How to set base font size for my npm package
- Delay rendering JSX in React
- How to make reactstrap modal open or close from parent component