Dinir/index.html

## index.html
<body>
	<div id="main"></div>
</body>

## react.js handle changes in object containing arrays.markdown

      
    Raw
  

              react.js handle changes in object containing arrays.markdown
            
          
    react.js handle changes in object containing arrays

A Pen by Dinir Nertan on CodePen.
License.

  
## script.babel
let others = [
	{id:"ab0001", text:"abc"},
	{id:"ab0002", text:"bcd"},
	{id:"ab0003", text:"cde"},
	{id:"ab0004", text:"def"},
	{id:"ab0005", text:"efg"}
];
let ab1thread = [
	"0-ab0001",
	{id:"ab0011", text:"abc-1"},
	{id:"ab0001", text:"abc"},
	{id:"ab0012", text:"abc-2"},
	{id:"ab0013", text:"abc-3"},
	"1-ab0001"
];
let ab3thread = [
	"0-ab0003",
	{id:"ab0031", text:"cde-1"},
	{id:"ab0003", text:"cde"},
	{id:"ab0032", text:"cde-2"},
	"1-ab0003"
];
let threadRelation = new Map();
threadRelation.set("ab0001", ab1thread);
threadRelation.set("ab0003", ab3thread);

let ListDisplayer = React.createClass({
	propTypes: {
		title: React.PropTypes.string,
		list: React.PropTypes.array,
		chosen: React.PropTypes.array,
		handleClick: React.PropTypes.func
	},

	render: function() {
		return (
			<div className="LD">
				<div className="title">{this.props.title}</div>
				{this.props.list.map((obj,index,arr) => {
					if(this.props.chosen.indexOf(obj.id)!==-1) {
						return <div onClick={this.props.handleClick} key={index} style={{backgroundColor: "teal"}} id={obj.id}>{obj.text}</div>
					} else {
						return <div onClick={this.props.handleClick} key={index} id={obj.id}>{obj.text}</div>
					}
				})}
			</div>
		)
	}
});

let Main = React.createClass({
	getDefaultProps: () => ({
		list: [],
		chosen: [],
		list2: [],
		chosen2: []
	}),
	getInitialState: function() {
	return {
	list: this.props.list,
	chosen: [],
	list2: this.props.list2,
	chosen2: []
}
														 },

														 listenSelection: function(e,number) {
	let newChosen = number===1?this.state.chosen:this.state.chosen2;
	if(newChosen.indexOf(e.target.id)!==-1) {
		newChosen.splice(newChosen.indexOf(e.target.id),1);
	} else {
		newChosen = newChosen.concat(e.target.id);
	}
	this.setState(number===1?{chosen: newChosen}:{chosen2: newChosen});
},
	deleteSelection: function(number) {
		let newList = number===1?this.state.list:this.state.list2;
		let chosen = number===1?this.state.chosen:this.state.chosen2;
		for(let i=newList.length-1;i>=0;i--) chosen.indexOf(newList[i].id)!==-1?newList.splice(i,1):null;
		this.setState(number===1?{list: newList}:{list2: newList});
	},

		render: function() {
			return (
				<div>
					<ListDisplayer title={"MainList"} list={this.state.list} chosen={this.state.chosen} handleClick={e=>this.listenSelection(e,1)} />
					<ListDisplayer title={"SingleThread"} list={this.state.list2} chosen={this.state.chosen2} handleClick={e=>this.listenSelection(e,2)} />
					<input type="button" onClick={e=>this.deleteSelection(1)} value="Delete Selected in MainList" /><br />
					<input type="button" onClick={e=>this.deleteSelection(2)} value="Delete Selected in SingleThread" /><br />
					<input type="button" onClick={e=>{this.deleteSelection(1);this.deleteSelection(2);}} value="Delete" />
				</div>
			)
		}
});

window.onload = () => ReactDOM.render(
	<Main list={others} list2={ab1thread} />,
	document.getElementById("main")
);

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>

## style.scss
.LD {
	float: left;
	width: 5em;
	height: 15em;
	border: 1px solid black;
	margin-right: 1em;
	.title {
		border-bottom: 1px dotted black;
	}
}
	let others = [
	{id:"ab0001", text:"abc"},
	{id:"ab0002", text:"bcd"},
	{id:"ab0003", text:"cde"},
	{id:"ab0004", text:"def"},
	{id:"ab0005", text:"efg"}
	];
	let ab1thread = [
	"0-ab0001",
	{id:"ab0011", text:"abc-1"},
	{id:"ab0001", text:"abc"},
	{id:"ab0012", text:"abc-2"},
	{id:"ab0013", text:"abc-3"},
	"1-ab0001"
	];
	let ab3thread = [
	"0-ab0003",
	{id:"ab0031", text:"cde-1"},
	{id:"ab0003", text:"cde"},
	{id:"ab0032", text:"cde-2"},
	"1-ab0003"
	];
	let threadRelation = new Map();
	threadRelation.set("ab0001", ab1thread);
	threadRelation.set("ab0003", ab3thread);

	let ListDisplayer = React.createClass({
	propTypes: {
	title: React.PropTypes.string,
	list: React.PropTypes.array,
	chosen: React.PropTypes.array,
	handleClick: React.PropTypes.func
	},

	render: function() {
	return (
	<div className="LD">
	<div className="title">{this.props.title}</div>
	{this.props.list.map((obj,index,arr) => {
	if(this.props.chosen.indexOf(obj.id)!==-1) {
	return <div onClick={this.props.handleClick} key={index} style={{backgroundColor: "teal"}} id={obj.id}>{obj.text}</div>
	} else {
	return <div onClick={this.props.handleClick} key={index} id={obj.id}>{obj.text}</div>
	}
	})}
	</div>
	)
	}
	});

	let Main = React.createClass({
	getDefaultProps: () => ({
	list: [],
	chosen: [],
	list2: [],
	chosen2: []
	}),
	getInitialState: function() {
	return {
	list: this.props.list,
	chosen: [],
	list2: this.props.list2,
	chosen2: []
	}
	},

	listenSelection: function(e,number) {
	let newChosen = number===1?this.state.chosen:this.state.chosen2;
	if(newChosen.indexOf(e.target.id)!==-1) {
	newChosen.splice(newChosen.indexOf(e.target.id),1);
	} else {
	newChosen = newChosen.concat(e.target.id);
	}
	this.setState(number===1?{chosen: newChosen}:{chosen2: newChosen});
	},
	deleteSelection: function(number) {
	let newList = number===1?this.state.list:this.state.list2;
	let chosen = number===1?this.state.chosen:this.state.chosen2;
	for(let i=newList.length-1;i>=0;i--) chosen.indexOf(newList[i].id)!==-1?newList.splice(i,1):null;
	this.setState(number===1?{list: newList}:{list2: newList});
	},

	render: function() {
	return (
	<div>
	<ListDisplayer title={"MainList"} list={this.state.list} chosen={this.state.chosen} handleClick={e=>this.listenSelection(e,1)} />
	<ListDisplayer title={"SingleThread"} list={this.state.list2} chosen={this.state.chosen2} handleClick={e=>this.listenSelection(e,2)} />
	<input type="button" onClick={e=>this.deleteSelection(1)} value="Delete Selected in MainList" /><br />
	<input type="button" onClick={e=>this.deleteSelection(2)} value="Delete Selected in SingleThread" /><br />
	<input type="button" onClick={e=>{this.deleteSelection(1);this.deleteSelection(2);}} value="Delete" />
	</div>
	)
	}
	});

	window.onload = () => ReactDOM.render(
	<Main list={others} list2={ab1thread} />,
	document.getElementById("main")
	);
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
	.LD {
	float: left;
	width: 5em;
	height: 15em;
	border: 1px solid black;
	margin-right: 1em;
	.title {
	border-bottom: 1px dotted black;
	}
	}