Which of these is a real container in react?

Question

React

I meet a lot of formulations of different types of components and began to get a little confused.
Is a component that renders another component and passes data to it a container?
For example

const Nav = ({data}) => <a>{data}</a>;

class NavContainer extends Component = {
  render () {
    return(
    <Nav data="Hi" />
    )
  }
};

Or a container is a component (hawk) that wraps the received component and passes data to the wrapped component without drawing anything?

const Nav = ({data}) => <a>{data}</a>;

const navContainer = (Component) => {
  return ({text, ...props}) => {
    return(
    <Component data={text} {...props} />
    )
  }
};

const withTextNav = navContainer(Nav);
<withTextNav text="hi" />

Answer 1

I meet a lot of formulations of different types of components and began to get a little confused.
And you will meet more. Everyone comes up with their own, "slightly more correct" definition.
For some, a container is one thing, and for some it’s completely different, and the third will say that there are no real containers there at all, because real ones were only in the 80s and then they began to do some shit.
the main thing is to understand that the specific person who tells you this understands this word. Call it what you want - if you work in a team - then agree on what the term means. If it's on its own, then it doesn't matter.
The only thing worth focusing on is the terminology adopted in the official documentation. It also explains in detail what it all means. There are no containers as a separate term, the word is used utilitarianly.

Answer 2

I call containers such components that do not contain jsx markup, they work with data and pass it to other components (stupid), which in turn do nothing with data, but substitute them in jsx and return markup

Answer 3

Компонент-контейнер содержит логику, которая одинаковая/практически одинаковая для нескольких компонентов. В итоге, чтобы не дублировать один и тот же код в разных компонентах и не менять его то тут, то там при каких-либо изменениях их держат в одном контейнере.
Выглядит это примерно так:

const Container = (View) => {
 return class extends Component {
  state = { num: 1 };
  render() {
   return <View {..this.state} {...this.props} />
  }
 }
}

В компоненте пишите любую логику с изменением стейта, методами и т.д., а потом передаете это в оборачиваемый компонет, и в нем уже из пропсов достаете, что нужно
HOC это немного другое, например connect у react-redux это HOC, разницу между connect и выносом логики для отрисовки конкретных компонентов, думаю поймете сами