A lot of states was used. Bind methods and the use of create react app

[abiodun0]

Going through the code i saw you use states in almost all the components. There should be a difference and you should be able to use functional components when needed. there need to be some sort of communication between parent and child components.

Also using bind in the render method can lead to untimely performance issues as I've dropped in some of the comments.
Avoid forEach when you can and use map instead. where you used state.list could have been distrcuted to

(({list}) => {
const newList = list.map((todo) => ({...todo, isCompleted: showCompleted})
return {list: newList}
} ) 

I tell beginners to stay away from using create-react app. as

1. it hides the complexity which isn't a good enough thing for beginners
2. When it comes to auditing. using npm run eject gives about 500 lines of config files which is going to be a lot of hell trying to audit each lines of code
3. you leave the maintain of your app to it's creators. which could turn to a huge technical debt.

The to-do app seem to be less challenging. why don't you try a game of tic-tac-toe instead?

[mykeels]

Nice!

How do I not use states in all the components?

I read about using bind in the render method and how it's not good for performance. Thanks for that. Apparently, arrow functions are the key to solving that.

There is already communication between parent and child components using callbacks for child => parent and props for parent => child

I see you returned {list: newList} in the code you gave ... there's a missing prop called activeTab ... Is this deliberate, like would React automagically merge the objects? or is this a mistake?

create-react-app seems to be the easiest way to setup a React project. Could you point me in a good direction for setting it up without it?

I'll work on the tic-tac-toe app, perhaps one exactly like https://x-tic-tac.herokuapp.com, and see if I can use Redux in it too.

Thanks, I appreciate!

[mykeels]

I get the {list: newList} returned value now. Damn! object.assign is one powerful tool.

I've made the child components stateless, so all state is managed and handled from the App component. It makes it much easier to manage when the state is central. Thanks!

12ff917
...
188e583

[abiodun0]

I was just about to respond and saw this. ! Nice one.

So if you want to be able to do your own configurations. you can head over to webpackbin.com and create a sample app. then download the given configs. or better still start with bare bones something along this line. https://github.com/abiodun0/functional-react/blob/master/webpack.config.js this is for webpack 1 though and there are now significant changes to the config

[iykazrji]

Nice work man @mykeels !!!

Seems you fixed a lot of the issues @abiodun0 mentioned in his comment, but just adding to that, I think you should make less use of class based components if you're not going to have lifecycle methods or going to manipulate state within your component. You'd have the added performance benefit, and more testable code for less work really using purely functional components. Also, I see you have in mind trying out Redux on your next project. Rather than a tic-tac-toe app, I'd suggest an app that performs some sort of Async operation like a mock API call or something so you get to pay the debts of using thunks or sagas as soon as you can before having to use them in real projects...

Nice one again, I hope react keeps you hooked for the longest time!