Ошибка в React.js "The `style` prop expects a mapping from style properties to values, not a string..?

Question

[mskolyadinxd]

Как формулировать вопрос я понятия не имею, и что для этого нужно, в React новичок, я создал компонент Main, вставил в него код JSX со всеми импортами:

const Main = () => {
  return (
          <section className="u-clearfix u-gradient u-uploaded-video u-section-1" id="sectionone-1">
          <div className="u-clearfix u-sheet u-sheet-1">
            <div className="blur10px filter u-container-style u-expanded-width-lg u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-hover-feature u-opacity u-opacity-10 u-radius-30 u-shape-round u-group-1">
              <div className="u-container-layout u-container-layout-1">
                <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-1"><a href="{% url 'marketing' %}">Маркетинг</a></h3>
                <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-2"><a href="/search/?q=бизнес">Бизнес</a></h3>
                <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-3"><a href="{% url 'design' %}">Дизайн</a></h3>
                <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-4"><a href="{% url 'neirone' %}">ИИ</a></h3>
                <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-5"><a href="{% url 'coding' %}">Программирование</a></h3>
                <a href="{% url 'utopiaform' %}" className="u-border-2 u-border-palette-4-dark-1 u-btn u-btn-round u-button-style u-custom-font u-font-montserrat u-hover-feature u-hover-palette-4-dark-1 u-none u-radius-7 u-btn-1">Написать утопию</a>
              </div>
            </div>

                <div style="color: #fff" className="blur10px filter u-container-style u-expanded-width-lg u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-hover-feature u-opacity u-opacity-10 u-radius-30 u-shape-round u-group-2">

                <div className="u-container-layout u-valign-top-xs u-container-layout-2">
                  <div className="blur10px filter u-container-style u-group u-hover-feature u-opacity u-opacity-10 u-radius-30 u-shape-round u-group-3">
                    <div className="u-container-layout u-container-layout-3">
                      <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-6"></h3>
                      
                      <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-7"><a href="{% url 'account' el.author.profile.slug %}">  </a>&nbsp;
                      </h3>
               
                      <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-8"><a href="{% url 'user-utopies' el.author.username %}"></a></h3>
                      <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-9"> <span style="text-decoration: underline !important;"></span>

                      </h3>
                   <img className="u-hover-feature u-image u-image-circle u-preserve-proportions u-image-1" alt="" src="{{el.author.profile.avatar.url}}" data-image-width="900" data-image-height="900"></img>
                      <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-10">             </h3>                              
                      <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-11"></h3>
                      <span className="u-hover-feature u-icon u-icon-1" name="utopia_id" value="{{el.id}}" type="submit">
                  <button name="utopia_id" className="btn btn-link" value="" type="submit">
                              <svg color="#2cccc4" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" className="bi bi-heart-fill" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                              </svg></button></span>

                  <h3 className="u-custom-font u-font-montserrat u-text u-text-body-alt-color u-text-12"></h3>
                </div>
              </div>
            <div className="blur10px filter u-align-left u-container-style u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-hidden-lg u-hidden-md u-hidden-sm u-hidden-xs u-hover-feature u-opacity u-opacity-10 u-radius-30 u-shape-round u-group-4">
              <div className="u-container-layout u-valign-top-xs u-container-layout-4">
               </div>
               </div>
            </div>
          </div>
        </div>
        </section>
    )
}
export default Main

Извиняюсь за громоздкость кода, просто я даже представить себе не могу в чем тут может быть ошибка, ругается на css class, то что я понял, как мне узнать какой класс ему так не понравился?
Line 21:22: Style prop value must be an object react/style-prop-object
Line 26:23: Headings must have content and the content must be accessible by a screen reader jsx-a11y/heading-has-content
Line 31:109: Anchors must have content and the content must be accessible by a screen reader jsx-a11y/anchor-has-content
Line 32:116: Style prop value must be an object react/style-prop-object
Line 37:23: Headings must have content and the content must be accessible by a screen reader jsx-a11y/heading-has-content
Line 44:19: Headings must have content and the content must be accessible by a screen reader jsx-a11y/heading-has-content
еще он мне дал это, но легче как то не стало

Comments

[WbICHA]

The `style` prop expects a mapping from style properties to values, not a string

Style prop value must be an object

Я, конечно, понимаю, что я много прошу, но ты не пробовал, даже не знаю, перевести текст ошибки?

Answer 1

[Alexandroppolus]

В проп style надо передавать объект, а ты зачем-то ставишь туда строку.