Предупреждение: получено `true` для не-логического атрибута` uk-grid`

Question

Я довольно новичок в React и получаю эту ошибку, когда пытаюсь использовать карту https://getuikit.com/docs/card uikit в качестве компонента.

Удаление атрибута полностью разрушает структуру карт.

import React from 'react';
import faker from 'faker';
import "./css/Cards.css";

const Cards = (props) => {
    return (

        <div className="uk-card uk-card-default uk-width-1-2@m">
            <div className="uk-card-header">
                <div className="uk-grid-small uk-flex-middle" uk-grid>
                    <div className="uk-width-auto">
                        <img className="uk-border-circle" width="40" height="40" src={faker.image.animals} />>
                    </div>
                    <div className="uk-width-expand">
                        <h3 className="uk-card-title uk-margin-remove-bottom">Title</h3>
                        <p className="uk-text-meta uk-margin-remove-top"></p>
                    </div>
                </div>
            </div>
            <div className="uk-card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div className="uk-card-footer">
                <a href="#" className="uk-button uk-button-text">Read more</a>
            </div>
        </div>
    )
}




export default Cards; 

Заранее спасибо!

Answer 1

В соответствии с документами на https://getuikit.com/docs/javascript#component-usage при использовании с React атрибуты должны начинаться с data-.

Итак, вместо:

<div className="uk-grid-small uk-flex-middle" uk-grid>

Попробуйте:

<div className="uk-grid-small uk-flex-middle" data-uk-grid>