How to use in Block Editor - react-bootstrap?

I want to use in Guttenberg block some of tools used in react-bootstrap but something not work in my code property.

First I npm install react-bootstrap [email protected] the newest version, and this is register in package.json as well. Then in edit.js I try to import all dependencies:

 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import Card from 'react-bootstrap/Card';
  import React, { Component } from react;
  import { IWPGBlock } from 'react-gutenberg/'
import * as React from 'react'

and for sure that I made it correctly use an example from react's page.

export default function Edit() {

     return (
         p {...useBlockProps()}
Card style={{ width: '18rem' }}
  Card.Img variant=top src=holder.js/100px180 /
  Card.Body
    Card.TitleCard Title/Card.Title
    Card.Text
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    /Card.Text
    Button variant=primaryGo somewhere/Button
  /Card.Body
/Card

         /p
     );
 }

unfortunetelly, it did not work. I have no clue what I should change, can you give me a feedback?

UPDATE:

I try another way to solve this problem. I create another file to make my own component: komponent.js

import Card from 'react-bootstrap/Card';
import React, { Component } from react;


export default class  cardcomponents extends Component  {
render(){
    return (
        p {...useBlockProps()}
Card style={{ width: '18rem' }}
 Card.Img variant=top src=holder.js/100px180 /
 Card.Body
   Card.TitleCard Title/Card.Title
   Card.Text
     Some quick example text to build on the card title and make up the bulk of
     the card's content.
   /Card.Text
   Button variant=primaryGo somewhere/Button
 /Card.Body
/Card

        /p
    );
}
}

then it import to edit.js just like that import {cardcomponents} from './komponent.js';

and try to render

 export default function Edit() {

     return (
         p {...useBlockProps()}

effectivecards /
panother div/p
         /p
     );
 }

but this show me just another div. somewhere must be a mistake.

Topic block-editor twitter-bootstrap Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.