Кто-нибудь знает, почему все мои элементы отображаются в одном столбце, как если бы это была <navbar>?

Мой компонент рендерится в один столбец, равный приложенному фото, но это неправильно, это должен был быть массив 5x4.

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

  render() {
    return (
      <div className = "App">
        <Navbar onChange = {this.onChange.bind(this)} />
        <div className = "container mt-10">
          <div className = "row">
            {<RecipeItem list = {this.state.searchString} />}
          </div>
        </div>
      </div>
    );
  }
}


File RecipeItem.js 
const RecipeList = ({ searchString }) => {
    return(
    <div>
        <img className = "card-img-top img-fluid" src = {searchString.thumbnail} alt = {searchString.title} />
        <div className = "card-body">
            <h5 className = "card-title">{searchString.title}</h5>
            <p className = "card-text">
                <strong>Ingredients: </strong>{searchString.ingredients}
            </p>
        </div>
    </div>
    )
}

const RecipeItem = (props) => {
    return (
        <div className = "col-sm-3 mt-4">
            <div className = "card">
                {props.list && props.list.map((searchString, index) =>
                    <RecipeList searchString = {searchString} key = {index} />
                )}
            </div>
        </div>
    )
}