I just found out about react suite and it's really good but I can't figure out this error that says component is not exported from rsuite per example 'Attempted import error: 'Card' is not exported from 'rsuite'.' and this is happening very often like where is the component if not from rsuite and the docs for it are really bad it doesn't help much
import "./App.css";
import "rsuite/dist/styles/rsuite-default.css";
import { Row, Col, Card } from "rsuite";
const styles = {
padding: 20,
textAlign: "center",
};
function App() {
return (
<div className='App' style={styles}>
<Row>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
</Row>
</div>
);
}
export default App;
I can't find out why this is happening, tried looking up youtube, google or anything but it seems like the community for it is not that big I don't understand and I've had this with a lot of other components. Any help would be appreciated I really wanna use this library it looks really good
There is no Card component in the rsuite library, but you can implement it by combining Panel components.
https://rsuitejs.com/components/panel
In addition, the import of components is explained at the beginning of each component's documentation.
Related
I've just started to learn React. I've zero experience so go easy.
I have 4 images that I want to display horizontally across my app.
I know I can just do
import Image1 from './Image1.png`
import Image2 from './Image2.png`
...
And then within my app.js I can add something like
<Col>
<img src ...>
</Col>
<Col>
<img src ...>
</Col>
I've looked at the documentation and can't really find the correct way. What's the best way to avoid creating <Col> </Col> for every image?
Hope this makes sense?
Thanks
you can create new component to contain col and img called imageWrapper
function ImageWrapper({src}) {
return <Col>
<img src={src}>
</Col>
}
then use it
<ImageWrapper src...>
<ImageWrapper src...>
also you can use array for images then use map
like this
import Image1 from './Image1.png'
import Image2 from './Image2.png'
const arrayImage=[ Image1 , Image1 ]
return arrayImage.map((image)=>{
return (
<Col>
<img src={image}>
</Col>
)
});
{[img1, img2....].map((image, i) => (
<Col key={i}>
<img src={image} />
</Col>
)}
this is an easy/correct way to do it
I want to get at least 2 cards on the same row but since the data is getting mapped one by one, I have no idea how to do so. I am using a custom component named 'Content' and returning data here
import React from "react";
import { Card, CardGroup, Col, Row } from "react-bootstrap";
import { ListGroup, ListGroupItem } from "react-bootstrap";
const Content=({name, image, type, vegan, cuisines})=>{
return(
<div>
<CardGroup>
<Col xs={12} sm={6} md={4} lg={4}>
<Card>
<Card.Img variant="top" src={image} />
<Card.Body>
<Card.Title>{name}</Card.Title>
<Card.Text>
<ListGroup>
<ListGroupItem>Type: {type}</ListGroupItem>
<ListGroupItem>Vegan: {vegan}</ListGroupItem>
<ListGroupItem>Cuisines: {cuisines.cuisines.join(", ")}</ListGroupItem>
</ListGroup>
</Card.Text>
</Card.Body>
</Card>
</Col>
</CardGroup>
</div>
)
}
export default Content
I believe you aren't using the Row component to wrap your columns.
Try replacing <CardGroup> with <Row> as shown in this section of the docs.
Columns in a row wrap even though xs={..} add up to 12. This happens in all screen sizes. I have checked the following questions and bug reports but they havent helped:
SO Question: Bootstrap xs columns wrap
Gatsby Github Issue: https://github.com/gatsbyjs/gatsby/issues/17914
The workaround in the issue did not help me.
Versions:
"gatsby": "^2.18.5",
"react-bootstrap": "^1.0.0-beta.16"
"bootstrap": "^4.4.1"
"react": "^16.12.0",
Code Snippet:
<React.Fragment>
<Container>
<Row>
{
tech["name"].map(db => {
let icon = svgs[toLower(db)];
return(
<Col xs={colSize}>
<Container>
<Row>
<Col xs={4} style={{"maxHeight": "100px", "maxWidth": "100px"}}>
<img src={icon} alt={db}/>
</Col>
<Col xs={8}>
<h5>{db}</h5>
</Col>
</Row>
</Container>
</Col>
)
})
}
</Row>
</Container>
</React.Fragment>
Generated HTML:
The 4th column (SQL Server) wraps around
The elements are rendered correctly after a reload
Website Link: https://tokern.io/cheat_sheet/
You're adding padding to the box and using the default box-sizing mode. To see why this is problematic, review the box-sizing documentation on MDN or this article on box-sizing on CSS Tricks.
To resolve the issue, add box-sizing: border-box to the .col declaration.
This question already has answers here:
onClick doesn't render new react component.
(5 answers)
Closed 3 years ago.
Sorry if this topic is probably a copy of another one, but I am still with some doubts and I could not solve reading this related topics:
onClick doesn't render new react component.
How can I call my 'Survey' component from the react button, using onClick?
I am using "onClick={Survey}" but it is not working, there is another way to do it or it is something wrong with this kind of call.
class App extends Component {
render() {
return (
<div className="App">
<Container>
<Row>
<Col><ClientInformation /></Col>
</Row>
<Row>
<Col>1 of 2 </Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col><Button variant="outline-primary" size="lg" block>QR Code
</Button></Col>
<Col><Button variant="outline-success" size="lg" block onClick={Survey} >Survey</Button></Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col><Button variant="outline-warning" size="lg" block>Warning</Button></Col>
<Col><Button variant="outline-secondary" size="lg" block>Secondary</Button></Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
</Container>
</div>
</div>
);
}
}
export default App;
onClick is an event handler, it's a function that is called to do something... there does not exist any built-in functionality in React that would allow you to give a component directly to a function and expect it to know what to do with it and when.
What you'd need to do is store a piece of data in your state that you can use to conditionally render the component.
I noticed you tagged this question with react-router. If you're talking about how to provide a component for a certain route, you need to import their built-in Route, Switch and Link components and provide your own component as the component prop on the Route. They provide an example.
I think you are misunderstanding for the onClick handler.
it requires function not react component or object.
Please use this.
import Survay from './survay'; // use correct path of the survay component
class App extends Component {
state = {
display: false,
}
render() {
return (
<div className="App">
<Container>
<Row>
<Col><ClientInformation /></Col>
</Row>
<Row>
<Col>1 of 2 </Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col><Button variant="outline-primary" size="lg" block>QR Code
</Button></Col>
<Col><Button variant="outline-success" size="lg" block onClick={()=>{this.setState({display: true})} >Survey</Button></Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col><Button variant="outline-warning" size="lg" block>Warning</Button></Col>
<Col><Button variant="outline-secondary" size="lg" block>Secondary</Button></Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
{
display &&
<Survey/>
}
</Container>
</div>
</div>
);
}
}
export default App;
And then please add the style to set a proper position and displaying for your Survay component.
I can't get bootstrap classes to work with react-bootstrap
I tried using bootstrap classes specifically flex properties in react-bootstrap but it doesn't seem to work. But on the docs it shows an example of them using it "https://react-bootstrap.netlify.com/layout/grid/", also the docs seem pretty vague so I went to bootstrap's docs but no avail there either.
I noticed when I change how many Col's (like this col md={4}) I want a specific col element to take up the positioning of this button changes even though it supposed to be in the center why is that ? Here is a example of my code
import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';
class Welcome extends React.Component {
render() {
return(
<div className="welcome">
<Container>
<Row className="justify-content-center">
<Col>
<Button variant="primary" size="lg">Large button</Button>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Welcome;
I'm fairly new to react as well, more so to react-bootstrap but I am very familiar with bootstrap, this has me ready to just use CSS grid or flex and not use bootstrap's grid lol. So if anyone can help me out that would be great and much appreciated.
Try This.
<Container>
<Row>
<Col md={{ order: 'last' }}>First, but last</Col>
<Col md>Second, but unordered</Col>
<Col md={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>