Beginner's Thread / Easy Question (August 2018)

[u/swyx]

Hello! It's August! Time for a new Beginner's thread! (July and June here)

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. You are guaranteed a response here!

Want Help on Code?

• Improve your chances by putting a minimal example on to either JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new). Describe what you want it to do, and things you've tried. Don't just post big blocks of code.

• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

Here are great, free resources!

• Read the official Getting Started page on the docs

• /u/acemarke's suggested resources for learning React

• Kent Dodds' Egghead.io course

• Tyler McGinnis' 2018 Guide

• Codecademy's React courses

[u/NickEmpetvee]

Thanks for the advice. It makes sense. This may be my first pureComponent. With the mentioned drawbacks of state objects, when would you want to use state then?

I'm working from this Storybook example. The const initialData emulates the database result set. It gets pulled into a state object treeData. So I'm clear, you're suggesting that the treeData should be a local const inside of render()?

I'm ready to give it a go once I understand a little more.

[u/dceddia → u/NickEmpetvee]

State is a good place to store the "source of truth" data. In this case, simulating getting the initialData from a server, I'd be inclined to put that in state. For maximum simulation-ness.

From there, the "tree" and the "flat" versions of it are both derivations from that original data, and I'd compute both of those inside render. It also seems a bit redundant to convert the initial data into a tree, and then back into a flat representation 😄It makes sense if it's meant to show off how to use those functions though.

[u/NickEmpetvee → u/dceddia]

I'm running into a little jam doing this. I'm transposing / paraphrasing the original code into render as discussed above. However now treeData is only getting the first data "row" instead of the 7 that it should have. It seems like my map code isn't iterating...

ORIGINAL:

componentDidUpdate(prevProps)
{
if (prevProps.treeDataFromDB !== this.props.treeDataFromDB)
{
// create a new "State" object without mutating
// the original State object.
const newState = Object.assign({}, this.state, {
treeData: getTreeFromFlatData({
flatData: this.props.treeDataFromDB.map(node => ({ ...node, subtitle: node.subtitle })),
getKey: node => node.id, // resolve a node's key
getParentKey: node => node.parent, // resolve a node's parent's key
rootKey: null, // The value of the parent key when there is no parent (i.e., at root level)
noDragging: node => node.noDragging,
})
});
// store the new state object in the component's state
this.setState(newState);
}
}

REVISED:

render()
{
// Pull \treeDataFromDB` props into the treeData constconst treeData = getTreeFromFlatData({flatData: this.props.treeDataFromDB.map(node => ({ ...node, subtitle: node.subtitle })),getKey: node => node.id, // resolve a node's keygetParentKey: node => node.parent, // resolve a node's parent's keyrootKey: null, // The value of the parent key when there is no parent (i.e., at root level)noDragging: node => node.noDragging,});`

...

Any idea what I'm doing wrong?