The best place to store logic in React app?

Question

I have two components. e.g. Dashboard and Card

Dashboard:

render() {
        const elements = this.props.cards.map((card, key) => {
            return (
                <Card item={card} onSave={this.onCardSave}>
            )
        })
    }

Card

render() {
    return (
        <div class="card">
            <input type="checkbox" checked={this.state.item.checked} onChange={this.onChangeChecked} />
            { this.someCondition() && <input type="text" value={this.state.item.name} onChange={this.onChangeName} />}
        </div>
    )
}

So text field visibility is depending on some condition. For example:

function someCondition () {
    return this.state.item.checked
}

!! This logic is only for Card instance

So where is the best place to store this logic?

Inside Card? (like my code)

Inside Dashboard? (pass all events in props for example)

If you can provide me some article on this theme, I would be very grateful

[this article](https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00#.786y1o4n7) should be good starting point — devellopah, Feb 02 '17 at 15:42

score 3 · Answer 1 · answered Feb 02 '17 at 14:45

A normal approach community is working with, is separate components in two types:

presentional components: Are concerned with how things look.
container components: Are concerned with how things work.

But one of the important things to notice is: "While container components tend to be stateful and presentational components tend to be stateless, this is not a hard rule. Presentational components can be stateful, and containers can be stateless too."

Like in your case, your logic's example depends only with internal logic of the component, so in my opinion, it would be better to keep inside the Card component.

Usefull articles: Dan Abramov, the Redux's creator: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.kyc0tpd11

score 1 · Answer 2 · edited May 23 '17 at 12:01

You can read up on stateless vs stateful components (or smart vs dumb). This SO link is quite clear ReactJS difference between stateful and stateless

In your example, Dashboard would hold the state for the card as im guessing you need to know whether a card is checked so you can do something else (like toggle the display of other components) l. If you had this logic in card you then need to try and reference that in the dashboard which becomes annoying and more difficult.

Hope that helps

The best place to store logic in React app?

2 Answers2