Javascript: Naming conventions for stateful components

[NitroBAY]

I'm new to React and there's a lot of new terms etc. I try to do things rights so I try to use your guidelines (thanks for that BTW).
Let's think about a card component.
As far as I understand I should split elements in a stateful components and a stateless function.
For instance I have a list of drugs (legal drugs, not silkroad V3.0 ^^), I want to display a list of Card so, doing my best to follow good patterns, I have a stateless function :

export default function Card(props) {
  return (
    <div className="drug-card card hoverable">
{/*Here goes my HTML*/}
    </div>
  );
}

Plus a component with all logic (subscribe to data, states etc.) whereas stateless function only cares about props it receives from the stateful component.
Am I right ?
Let's assume than yes for now. Here's my question : where should I put, or at least where do you put, the stateful components and the stateless function. In the same file, in the same folder, with different names for each files : Index.jsx for the stateless component and Container.jsx for the stateful component.

Is this a good pattern for example ?

I hope I didn't irritate you with what's is very probably noob questions but the React land is new for me.

[ljharb]

It's a fine question. I don't think this guide should proscribe a strict naming convention here. Having CardContainer seems fine, but I've also seen ConnectedCard, or StatefulCard, etc.

[NitroBAY]

Many thanks. As I didn't find anything about that in issues I was afraid that I was totally missing the point.

[NitroBAY]

Okay I could think anyway about the naming convention, even though I follow guidelines I didn't totally lost my brain.
Still one question if one has Card/CardContainer.jsx, do you think that one should still follow your guidelines and use Card/Index.jsx for the stateless function ?

[ljharb]

One of them should be Card/index.jsx (lowercase index, always) - whether the stateful or stateless one is the index depends on which one you consistently want to import from elsewhere in the app.

[NitroBAY]

Okay. Another unrelated question (sorry for polluting this thread) what do you use for css with react ? Inline css, modulus css or like me you have a less/sass file in the folder along with components ?
Because I've been reading a lot of things about styling react components but your opinion, at Airbnb but especially yours, matters a lot for me and a lot of devs.

[ljharb]

We currently use Aphrodite for CSS. https://github.com/airbnb/javascript/tree/master/css-in-javascript may be helpful here.

(I'm going to close this issue but feel free to keep discussing)