Skip to content

Instantly share code, notes, and snippets.

@a-m-dev
Last active July 8, 2018 23:54
Show Gist options
  • Save a-m-dev/d5d3fae00c02b65d2e5f333b1d077cf5 to your computer and use it in GitHub Desktop.
Save a-m-dev/d5d3fae00c02b65d2e5f333b1d077cf5 to your computer and use it in GitHub Desktop.
class MyComponent extends Component {
constructor(props) {
super();
this.state = {
_data: {
must_known: [],
libs: [],
tools: [],
softwares: []
}
}
}
componentDidMount() {
const { must_known , libs , tools , softwares } = this.state._data;
const _must_known_data = [
{
title: 'Html',
progress: 98,
icon_url: images.html_icon,
chart_data: {},
},
{
title: 'Css',
progress: 96,
icon_url: images.css_icon,
chart_data: {},
},
{
title: 'Js, ES6, 7',
progress: 78,
icon_url: images.js_icon,
chart_data: {},
}
]
this.setState(
Object.assign(
{},
this.state,
{
charts_data:
Object.assign(
{},
this.state._data,
{
// these two commented lines will take shallow copy , even with Object.assign()
// must_known: Object.assign([], _must_known_data),
// libs: Object.assign([], _must_known_data)
//solution for that is Json.parse
// also the pitfall for this is if you have some function in your object it will be skipped
must_known: JSON.parse(JSON.stringify(_must_known_data)),
libs: JSON.parse(JSON.stringify(_must_known_data))
}
)
}
)
)
}
render() {
// here you will get brand new array or object based on that part of state that you need
const { must_known, libs } = this.state._data
console.log('THIS IS MUSTKNOWN' + JSON.stringify(must_known , null , 2));
console.log('THIS IS LIBS: ' + JSON.stringify(libs , null , 2));
return(
...
)
}
}
export default MyComponent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment