thinking-in-react | A walk through the thought process of building simple apps using React | Frontend Framework library

Here is a super-contrived example using the strict structure you have given us here. Hopefully it will help explain how to think about state placement, then we can adjust it slightly to what you probably want in actual fact.

Model means the same for both, The only place I see them mention like you say is here:

There are two types of “model” data in React: props and state. It’s important to understand the distinction between the two;

I think they are speaking about how props or state model are handled.

Check this link out:

https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props

props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

Also:

https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

Edit:

I would say you can "model data" with the existing "data models" which are props and state

check: https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props

While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

You cannot do that in Svelte. Instead you would do a simple reverse lookup:

The most basic way is shown in following snippet:

React uses keys as a way to identify components within a list, and they should be unique within that list (React docs). If there's more than one component with the same key it can lead to issues like the one you're seeing (since you're using name as a key, and two users have the name lJames).

You can fix this by either giving each user a unique id property, or use the concatenated user and email as a key - key={user.name + user.system}

This line will not clone an object, rather it will create a reference

Actually there are lots of good articles, blog entries even SO answers for that. You can find those and try to write some code. As you write your code with React you will understand where do you need state and where don't. This is why your question has been downvoted.

I don't quite understand the question "How to identify states in React" but if your component depends on a data to render and show some results, then this data can be placed in state. State changes, component rerenders and show results depending on the state. Think about the very basic Counter example.

The third principle of Redux (listed in the introduction section of the docs) is that 'changes are made with pure functions'.

A pure function is a function that always returns the same result given the same inputs, and doesn't cause any side effects. Having a callback log something out most definitely would be a side effect!

The docs go on to say:

It's very important that the reducer stays pure. Things you should never do inside a reducer:

• Mutate its arguments;
• Perform side effects like API calls and routing transitions;
• Call non-pure functions, e.g. Date.now() or Math.random().

The reasoning behind this is it makes your reducers predictable - you know that, given an action with a certain payload, you're guaranteed to have the same output. This makes your app both easier to understand as a developer, and easier to unit test.

If you want to perform side effects when an action takes place, you should install a middleware that allows you to do so - some common examples of these are:

• redux-thunk, which allows you to dispatch functions that can in turn dispatch actions (commonly used to make API calls)
• redux-logger, which allows you to log out actions that are dispatched.
• redux-devtools-extension, which allows you to view your state and actions in a Chrome devtools extension.

If you can't find a middleware package that does what you need (rare, to be honest - there's lots out there already!), you can write your own quite easily.

In the 'Thinking in React' page, the component nesting hierarchy is such that a ProductTable contains several ProductRows. We can model that in ReasonReact by mapping over an array of products and producing ProductRows as the output. E.g.: