I am trying to use a bootstrap-react component <Collapse> that will be a child of a <Cart> component::
<div>
<Cart></Cart>
</div>
This is the part of the render of Cart component:
<Collapse>
<div className="row">
<hr/>
<div className="col-md-2"></div>
<div className="col-md-2"></div>
<div className="col-md-1"></div>
<div className="col-md-2">Upfront</div>
<div className="col-md-1"></div>
<div className="col-md-2">Monthly</div>
<div className="col-md-2"></div>
</div>
</Collapse>
This is the error I get:
Invariant Violation: React.Children.only expected to receive a single React element child.
Why do I get React.Children only expected error?
Remove the < Collapse /> from the Cart component.
<Collapse in={test}>
<Cart></Cart>
</Collapse>
cart
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-2">TOTAL</div>
<div className="col-md-2">Upfront</div>
<div className="col-md-2">Monthly</div>
<div className="col-md-2"></div>
</div>
Hope this helps!
Related
I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
<div className="container-fluid mb-2">
<Carousel />
<div className="mt-2">
<div className="row">
<div className="col-md-2">
<GetAllCategories />
</div>
<div className="col-md-10">
<div className="row row-cols-1 row-cols-md-4 g-4">
<div className="col">
{products.map((product) => {
return <ProductCard item={product} />;
})}
</div>
</div>
</div>
</div>
</div>
</div>
PRODUCT CARD CODE:
const ProductCard = (product) => {
return (
<div class="card border-color rounded-card card-hover product-card custom-bg">
<img
src={"http://localhost:8080/api/product/" + product.item.imageName}
class="card-img-top rounded mx-auto d-block m-2"
alt="img"
style={{
maxHeight: "270px",
maxWidth: "100%",
width: "auto",
}}
/>
<div class="card-body text-color">
<h5 class="card-title d-flex justify-content-between">
<div>
<b>{product.item.title}</b>
</div>
<CategoryNavigator
item={{
id: product.item.category.id,
title: product.item.category.title,
}}
/>
</h5>
<p className="card-text">
<b>{product.item.description}</b>
</p>
</div>
<div class="card-footer">
<div className="text-center text-color">
<p>
<span>
<h4>Price : ₹{product.item.price}</h4>
</span>
</p>
</div>
<div className="d-flex justify-content-between">
<Link
to={`/product/${product.item.id}/category/${product.item.category.id}`}
className="btn bg-color custom-bg-text"
>
Add to Cart
</Link>
<p class="text-color">
<b>
<i>Stock :</i> {product.item.quantity}
</b>
</p>
</div>
</div>
</div>
);
};
export default ProductCard;
From the past 4 days, I'm struggling to resolve this issue.
Please help me to fix this.
Thank You
You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd
I'm trying to put useState hook values to a component via props.
As I understand typescript complains that I didn't specify setActive to boolean type. Am I right? If so, how can I do it?
const Card = () => {
const [activeModal, setActiveModal] = useState<boolean>(false)
return (
<>
<ApproveModal active={activeModal} setActive={setActiveModal} />
<div className="card">
<div className="card-wrapper">
<div className="card-header">
<div className="card-header-left">
<img src={token} alt="token" />
<div className="card-header-info-tag">
<h1>WETH-WBNB LP</h1>
<p>Auto-Compounding</p>
</div>
</div>
<div className="card-header-right">
<p>Pancake</p>
<img src={pancake} alt="pancake" />
</div>
</div>
<div className="card-info">
<div className="card-info-item">
<div className="card-info-item-title">Staked</div>
<div className="card-info-item-value">$482.22K</div>
<div className="card-info-item-description">39595 LPs</div>
</div>
<div className="card-info-item">
<div className="card-info-item-title">APY</div>
<div className="card-info-item-value">365%</div>
<div className="card-info-item-description">Daily: 2.00%</div>
</div>
<div className="card-info-item">
<div className="card-info-item-title">TVL</div>
<div className="card-info-item-value">$482.22K</div>
<div className="card-info-item-description">39595 LPs</div>
</div>
</div>
<div className="card-button" onClick={() => setActiveModal(!activeModal)}>Approve</div>
</div>
</div>
</>
)
}
"text to fix little text problem"
"text to fix little text problem"
"text to fix little text problem"
And ApproveModal
interface ApproveModalProps {
active: boolean;
setActive: boolean;
}
const ApproveModal = ({active, setActive}: ApproveModalProps) => {
return (
<div className="modal">
<div className="modal-content">
<div className="modal-header">
<img src={modalLogo} alt="modalLogo" />
<div className="modal-header-info">
<div className="modal-header-info-title">WETH-WBNB LP</div>
<div className="modal-header-info-description">Auto-Compounding</div>
</div>
<div className="modal-header-info-swap">#PancakeSwap</div>
<img src={closeIcon} alt="closeIcon" className="close-button" />
</div>
<div className="modal-actions">
<div className="modal-actions-buttons">
<div className="deposit">Deposit</div>
<div className="withdrow">Withdrow</div>
</div>
</div>
<div className="modal-balance">
<div className="modal-balance-header">
<div className="modal-balance-header-left">
<div className="balance">Balance</div>
<div className="link">Create LP</div>
</div>
<div className="modal-balance-header-right">
<img src={updateIcon} alt="updateIcon" />
<div className="value">0.0000</div>
<div className="value-description">($0.00)</div>
</div>
</div>
<div className="balance-input">
<input type="text" />
<div className="input-button">MAX</div>
</div>
</div>
<div className="modal-info">
<div className="modal-info-apy">
<div className="modal-info-apy-title">APY</div>
<div className="modal-info-item">
<div className="apy-value">365%</div>
<div className="apr-value">APR: Swap 70.9% + GROW 73.5%</div>
</div>
</div>
<div className="modal-info-contact">
<div className="modal-info-contact-title">Contact</div>
<div className="modal-info-item">
<div className="contact-link">View on BScScan</div>
<div className="contact-address">oxAD6bD158869a97219447cf63b090</div>
</div>
</div>
<div className="modal-button">Approve</div>
<h1>No deposit free. No withdraw free.</h1>
</div>
</div>
</div>
)
}
Here is the code
The problem lies in your Card component. The error is saying that the setActive prop expects to receive a boolean value, but you are providing it with a function.
It should be expecting a function. You’ll want to change the props types on your Card such that setActive is a function whose argument is a boolean.
interface CardProps {
setActive: (active: boolean) => void;
…
If you want to be able to use a prevState callback when calling setActive inside the Card component, then you can use the exact type of your setActiveModal function, which is this:
interface CardProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>;
…
I am trying to make a component such that it holds another HTML element along with the React custom components. I created the component but it didn't work as I want. Currently, it didn't get rendered.
whole component structure
<AddingDetail>
<div className="row">
<DetailHeader link="/dashboard/setting" linkText="Back" heading="Add Role" />
<DetailBody>
<h1>Hello</h1>
</DetailBody>
<DetailFooter buttonText="Add" />
</div>
</AddingDetail>
AddingDetail component
render()
{
return(
<div className="col-md-12 bg-white border-radius-10">
</div>
)
}
DetailBody
render()
{
return(
<div className="col-md-12">
</div>
)
}
DetailHeader
return(
<div className="col-md-12 mgb-30" style={border} >
<div className="row" style={{marginBottom:'10px'}}>
<div className="col-md-6 flex vertical-center">
<h3 className="sub-heading roboto mgb-0">{this.props.heading}</h3>
</div>
<div className="col-md-6 align-right flex vertical-center flex-end">
<Link to={this.props.link}>
<button type="button" className="golden-button">{this.props.linkText}}</button>
</Link>
</div>
</div>
</div>
)
DetailFooter
return(
<div className="col-md-12 align-center mgb-20 mgt-20">
<button type="button" className="golden-button">{this.props.buttonText}</button>
</div>
)
You can use props.children to show the content in AddingDetail :
render() {
return(
<div className="col-md-12 bg-white border-radius-10">
{ this.props.children } //<---- HERE
</div>
)
}
And the same change you can apply to DetailBody.
render() {
return(
<div className="col-md-12">
{ this.props.children }
</div>
)
}
I'm using Bootstrap's grid system in my ReactJS project. Under a row, I have multiple columns (col-md-4) which I want to animate as they are added to or removed from the row as the component state changes. But Using CSSTransitionGroup immediately under a row to let the columns render as children leaves a span under the row and above the columns ruining the columns' left float.
<div className="row">
<ReactCSSTransitionGroup
transitionName={`fadeIn`}
transitionEnterTimeout={200}
transitionLeaveTimeout={200}>
{list.map(user => { return (
<div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
<div class="card">
</div>
</div>
)})}
</ReactCSSTransitionGroup>
</div>
YIELDS:
<div class="row">
<span>
<div className="col-sm-6 col-md-8 col-lg-4" key={user.id}>
<div class="card">
...
</div>
</div>
</span>
</div>
What is the correct approach to this?
Solved : just add className="row" in CSSTransitionGroup element
Sample code Here:
<CSSTransitionGroup
transitionName="item"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
className="row">
{myIndustries}
</CSSTransitionGroup>
I am implementing Materialize modal in react but it does not show anything. I separated the modal into component and the button that calls the modal in the parent container.
Here is my code:
Parent.js:
return (
<div>
<div>
<HelpForm />
</div>
<div className="container">
<ul className="collection">
{items.map(item =>
<a refs="modalTrigger" className="modal-trigger"
key={item.id}
data-target="#modal1">
<HelpFeedItem key={item.id} item={item} />
</a>
)}
</ul>
<HelpFeedModal />
</div>
</div>
);
Modal.js
render() {
return (
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
);
Is there something obvious that I am missing?
Thanks!
I got this to work by including jQuery in my project and then adding the suggested jQuery code at the top the render function in a component.
index.html:
<html>
<body>
//Any other html
<script src="jquery cdn of your choice"></script>
</body>
</html>
ModalComponent.js:
class Modal extends Component {
render() {
//You must use window.$ or $ will be undefined
window.$(document).ready(function() {
window.$('.modal').modal();
});
return (
<div>
//this is the trigger
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
//this is the modal
<div id='modal1' className='modal'>
<div className='modal-content'>
<h4>Modal Header</h4>
<p>Text in the modal body</p>
</div>
</div>
</div>
)
}
}
You need to use react-materialize in order to use Materialize's javascript components. https://github.com/react-materialize/react-materialize