How to delete a div with id slider using ReactJS? - reactjs

Question

I am trying to delete div section without using state, how to remove this? I tried by using unmountComponentAtNode but showing the error
unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.
Code:
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';
import { withStyles } from '#material-ui/core/styles';
import Icon from '#material-ui/core/Icon';
import { unmountComponentAtNode } from 'react-dom';
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;
const marks = {
0: <strong>0°C</strong>,
26: '26°C',
37: '37°C',
50: '50°C',
100: {
style: {
color: 'red',
},
label: <strong>100°C</strong>,
},
};
const handle = (props) => {
const { value, dragging, index, ...restProps } = props;
return (
<Tooltip
prefixCls="rc-slider-tooltip"
overlay={value}
visible={dragging}
placement="top"
key={index}
>
<Handle value={value} {...restProps} />
</Tooltip>
);
};
class StepSlider extends React.Component {
constructor(props) {
super(props);
this.state = { sliderValues: [80] };
this.onDelEvent = this.onDelEvent.bind(this)
}
handleChange = sliderValues => {
this.setState({ sliderValues });
};
onDelEvent = (e) => {
console(e)
var object = this.refs.slider;
unmountComponentAtNode(object);
document.body.removeChild(object);
}
render() {
const { classes } = this.props;
const { sliderValues } = this.state;
return (
<div className="row" style={{ margin: '50px' }} ref="slider" id="slider">
<div className="col-md-11">
<div className="box-header" style={{ textAlign: 'center', fontSize: '20px' }}><strong>Project NPV: $2.98M</strong></div>
<p style={{ position: 'absolute', color: 'pink' }}>kjh</p>
{/* <Slider min={0} max={100} marks={marks} defaultValue={sliderValues} onChange={this.handleChange} handle={handle} tipFormatter={value => `${value}%`}/> */}
<Slider
min={0} max={100} marks={marks} defaultValue={sliderValues} onChange={this.handleChange} handle={handle} tipFormatter={value => `${value}%`}
trackStyle={{ backgroundColor: 'blue', height: 15 }}
handleStyle={{
borderColor: 'red',
height: 35,
width: 35,
marginLeft: -14,
marginTop: -9,
backgroundColor: 'white',
}}
railStyle={{ backgroundColor: 'black', height: 15 }}
/>
</div>
<div className="col-md-1">
<Icon className={classes.icon} color="primary" onClick={this.onDelEvent.bind(this)} style={{ marginTop: '45px' }}>
remove_circle</Icon>
{/* <div style={wrapperStyle}>
<p>Range with custom handle</p>
<Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
</div> */}
</div>
</div>
)
}
}
export default withStyles({ withTheme: true })(StepSlider);

Answer 1

I suggest the following pattern for dynamic removal of sliders:
Slider.js
const Slider = ({ id, onRemove }) => (
<div className="slider">
<button onClick={() => onRemove(id)} />
</div>
);
export default Slider;
StepSlider.js
import Slider from './Slider';
class StepSlider extends React.Component {
state = {
sliders: [
{id: 1, value: ...},
{id: 2, value: ...},
...
]
}
handleRemoveSlider = id => {
this.setState(prevState => ({
sliders: [...prevState.sliders.filter(slider => slider.id !== id)]
}))
}
render() {
this.state.sliders.map(slider => (
<Slider id={slider.id} onRemove={this.handleRemoveSlider} />
))
}
}

Answer 2

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';
import { withStyles } from '#material-ui/core/styles';
import Icon from '#material-ui/core/Icon';
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;
const marks = {
0: '5%',
10: '6%',
20: '7%',
30: '8%',
40: '9%',
50: '10%',
60: '11%',
70: '12%',
80: '13%',
90: '14%',
100: '15%'
};
const handle = (props) => {
const { value, dragging, index, ...restProps } = props;
return (
<Tooltip
prefixCls="rc-slider-tooltip"
overlay={value}
visible={dragging}
placement="top"
key={index}
>
<Handle value={value} {...restProps} />
</Tooltip>
);
};
const handleStyle = {
borderColor: 'red',
height: 28,
width: 28,
marginLeft: -14,
marginTop: -8,
backgroundColor: 'white',
}
class StepSlider extends React.Component {
constructor() {
super()
this.state = {
sliders: [
{ id: 1, title: 'Discount Rate', value: '5' },
{ id: 2, title: 'Total Volume', value: '10' },
{ id: 3, title: 'Avg Sales Rate', value: '50' }
]
}
this.handleRemoveSlider = this.handleRemoveSlider.bind(this);
this.onChange=this.onChange.bind(this)
}
onChange=(e)=>{
let inputValue = e;
let statusCopy = Object.assign({}, this.state);
statusCopy.value = inputValue;
this.setState(statusCopy);
}
handleRemoveSlider = id => {
this.setState(prevState => ({
sliders: [...prevState.sliders.filter(slider => slider.id !== id),
],
}))
}
render() {
return (
this.state.sliders.map(slider => (
<div>
<Button id={slider.id} onRemove={this.handleRemoveSlider} title={slider.title} value={slider.value} onChange={this.onChange}/>
</div>
))
)
}
}
export default StepSlider;
const Button = ({ id, onRemove, value, title,onChange }) => (
<div className="row" style={{ margin: '50px' }} id={id}>
<div className="col-md-1">
{title}
</div>
<div className="col-md-10">
<Slider min={0} max={100} handle={handle}
defaultValue={value} marks={marks}
tipFormatter={value => `${value}%`}
trackStyle={{ backgroundColor: 'blue', height: 15 }}
handleStyle={handleStyle}
railStyle={{ backgroundColor: 'black', height: 15 }}
onChange={onChange}
/>
</div>
<div className="col-md-1">
<button onClick={() => onRemove(id)} style={{ backgroundColor: '#1a237e', color: 'white' }}>X</button>
</div>
</div>
);
Actually this is working, i mean deleting slider by passing its respective id but state is not updating and i wanna update the particular slider value onchanging it. please check and help me