The homepage is blanked using swiper in nextjs. and also all the components within the file also not loaded in the browser using swiper. I guess the other dependencies of the package.js may cause the problem. The problem needs to be solved as I faced this for 3 days.
everything is ok except the carousel if not add swiper in the app.
I have installed the following dependencies:
"dependencies": {
"#ant-design/compatible": "^1.0.8",
"#ant-design/icons": "^4.6.2",
"#ckeditor/ckeditor5-build-classic": "^25.0.0",
"#ckeditor/ckeditor5-react": "^3.0.1",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#hookform/error-message": "^2.0.0",
"#hookform/resolvers": "^2.8.2",
"antd": "latest",
"antd-img-crop": "^3.16.0",
"axios": "^0.21.1",
"bootstrap": "5.0.2",
"braft-editor": "^2.3.9",
"cors": "^2.8.5",
"dayjs": "^1.10.7",
"joi": "^17.4.2",
"less": "^4.1.2",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"next": "latest",
"nookies": "^2.5.2",
"react": "17.0.2",
"react-bootstrap": "^1.6.0",
"react-color": "^2.19.3",
"react-dom": "17.0.2",
"react-hook-form": "7.16.1",
"react-hot-toast": "^2.1.1",
"react-image-magnify": "^2.7.4",
"react-infinite-scroll-component": "^6.1.0",
"react-intersection-observer": "^8.32.1",
"react-router-dom": "^5.2.0",
"react-share": "^4.4.0",
"sass": "^1.34.1",
"sslcommerz-lts": "^1.1.0",
"sweetalert": "^2.1.2",
"swiper": "^8.4.2",
"yup": "^0.32.11"
},
Swiper component
<section>
<Swiper observer={true} spaceBetween={10}
modules={[Navigation,Scrollbar,Pagination]}
navigation
pagination={{clickable:true}}
slidesPerView={2}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)} className={styles.swiperDiv}>
<SwiperSlide className={styles.card}>
<h2>Documentation 1→</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 2 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 3 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 4 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 5 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
</Swiper>
</section>
```
[output for using swiper in the app][1]
[1]: https://i.stack.imgur.com/7cPir.png
I want to use swiper for the carousel and slider component for the app
Related
Since I updated to the latest version of React and react-bootstrap this has not worked. Can someone help me understand why?
When view is changed by any means other than clicking on the toggle button the style does not show as checked.
It works as expected when clicked, but even when I explicitly set checked={true} within the ToggleButton component the button still does not show as checked unless it is clicked.
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
const SidebarMode = ({ view, setView }) => {
return (
<ToggleButtonGroup type="radio" name="modeSelect">
<ToggleButton
id="habitat"
variant="outline-secondary"
value="habitat"
checked={view === "habitat"}
onChange={(e) => setView(e.currentTarget.value)}
>
Visualize Habitat
</ToggleButton>
<ToggleButton
id="add"
variant="outline-secondary"
value="add"
checked={view === "add"}
onChange={(e) => setView(e.currentTarget.value)}
>
Import AOI
</ToggleButton>
<ToggleButton
id="view"
variant="outline-secondary"
value="view"
checked={view === "view"}
onChange={(e) => setView(e.currentTarget.value)}
>
Summarize AOI
</ToggleButton>
<ToggleButton
id="act"
variant="outline-secondary"
value="act"
checked={view === "act"}
onChange={(e) => setView(e.currentTarget.value)}
>
Take Actions
</ToggleButton>
</ToggleButtonGroup>
);
};
export default SidebarMode;
EDIT:
Here's the package.json incase it's a version issue and not user error.
{
"name": "cvt1",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.2.0",
"#mapbox/mapbox-gl-draw": "^1.3.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.2.1",
"#turf/area": "^6.5.0",
"#turf/bbox": "^6.5.0",
"assert": "^2.0.0",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"buffer": "^6.0.3",
"chart.js": "^3.8.0",
"deck.gl": "^8.8.4",
"i": "^0.3.7",
"mapbox-gl": "^2.9.2",
"npm": "^8.15.0",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-bootstrap-range-slider": "^3.0.8",
"react-chartjs-2": "^4.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
"react-dropzone": "^14.2.1",
"react-hamburger-menu": "^1.2.1",
"react-icons": "^4.4.0",
"react-map-gl": "^7.0.16",
"react-multi-switch-toggle": "^1.0.12",
"react-redux": "^8.0.2",
"react-resizable-element": "^0.1.5",
"react-router-dom": "^6.3.0",
"react-scripts": "^2.1.3",
"react-select": "^5.3.2",
"react-switch": "^7.0.0",
"react-tooltip": "^4.2.21",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",
"shpjs": "^4.0.2",
"start": "^5.1.0",
"uuid": "^8.3.2",
"viewport-mercator-project": "^7.0.4",
"worker-loader": "^3.0.8"
},
Am new to reactjs, and am working on a project built on "architectui-react-pro" ui.
The project is working good on my m1 macbook, but not working on my freelancers machines (Windows). I tried to load it on another intel based macbook and am getting this error.
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
| import History from '../../utils/History';
| var Login = lazy(function () {
> return import("../../Pages/Login");
| });
|
Following is my package.json file:
"name": "architectui-react-pro",
"version": "1.6.1",
"private": true,
"description": "Financial Assistance - MHB",
"author": "MatrixSoftwares.com",
"homepage": "",
"repository": {
"type": "git",
"url": "git+https://github.com/dpackdev/architectui-react-pro"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.4",
"#progress/kendo-react-pdf": "^4.7.0",
"#types/googlemaps": "^3.43.3",
"#types/markerclustererplus": "^2.1.33",
"#wojtekmaj/react-datetimerange-picker": "^2.3.0",
"animate-sass": "^0.8.2",
"apexcharts": "^3.27.1",
"aphrodite": "^2.4.0",
"availity-reactstrap-validation": "^2.7.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"chart.js": "^2.9.4",
"chartist": "^0.10.1",
"chroma-js": "^2.1.2",
"ckeditor4": "^4.16.1",
"ckeditor4-react": "^1.4.2",
"classnames": "^2.3.1",
"date-arithmetic": "^3.1.0",
"date-fns": "^1.30.1",
"dom-to-pdf": "^0.2.2",
"dropzone": "^5.9.2",
"fibers": "^4.0.2",
"globalize": "^1.4.2",
"google-map-react": "^1.1.5",
"hamburgers": "^0.8.1",
"html2canvas": "^1.0.0-rc.7",
"install": "^0.13.0",
"jquery": "^3.6.0",
"js-base64": "^3.7.2",
"js-md5": "^0.7.3",
"jspdf": "^2.3.1",
"jw-react-pagination": "^1.1.0",
"loaders.css": "^0.1.2",
"m-react-splitters": "^1.2.0",
"moment": "^2.24.0",
"namor": "^1.1.2",
"node-sass": "^4.13.0",
"number-to-words": "^1.2.4",
"pe7-icon": "^1.0.4",
"radium": "^0.26.0",
"rc-slider": "^8.7.1",
"rc-tabs": "^9.6.7",
"rc-tree": "^2.1.4",
"react": "^16.14.0",
"react-animations": "^1.0.0",
"react-anime": "^3.0.3",
"react-apexcharts": "^1.3.9",
"react-app-polyfill": "^1.0.4",
"react-big-calendar": "^0.20.4",
"react-bootstrap-sweetalert": "^4.4.1",
"react-bootstrap-table-next": "^3.2.0",
"react-bootstrap-table2-filter": "^1.2.0",
"react-bootstrap-typeahead": "^3.4.7",
"react-burgers": "^1.3.0",
"react-chartist": "^0.13.3",
"react-chartjs-2": "^2.11.2",
"react-circle": "^1.1.1",
"react-color": "^2.19.3",
"react-compound-slider": "^2.4.0",
"react-cookie": "^4.0.3",
"react-copy-to-clipboard": "^5.0.3",
"react-countup": "^4.2.2",
"react-cropper": "^1.3.0",
"react-datepicker": "^2.9.6",
"react-dates": "^20.3.0",
"react-dnd": "^7.7.0",
"react-dnd-html5-backend": "^7.7.0",
"react-dom": "^16.14.0",
"react-dropzone": "^10.1.9",
"react-flag-icon-css": "^1.0.25",
"react-flagkit": "^1.0.2",
"react-icons": "^3.8.0",
"react-image-crop": "^8.6.12",
"react-input-mask": "^2.0.4",
"react-js-pagination": "^3.0.2",
"react-ladda": "^6.0.0",
"react-liquid-gauge": "^1.2.4",
"react-loader": "^2.4.7",
"react-loader-advanced": "^1.7.1",
"react-loaders": "^3.0.1",
"react-loading-overlay": "^1.0.1",
"react-map-gl": "^5.3.16",
"react-metismenu": "^1.4.0",
"react-motion-drawer": "^3.1.0",
"react-nouislider": "^2.0.1",
"react-numeric-input": "^2.2.3",
"react-on-screen": "^2.1.1",
"react-pagify": "^2.4.0",
"react-paginate": "^6.3.0",
"react-pdf": "^5.3.0",
"react-perfect-scrollbar": "^1.5.3",
"react-popper": "^1.3.11",
"react-rating": "^1.7.2",
"react-redux": "^7.2.4",
"react-redux-form": "^1.16.14",
"react-resize-detector": "^4.2.1",
"react-responsive-tabs": "^3.3.0",
"react-router-dom": "^5.1.0",
"react-scripts": "3.0.0",
"react-scroll": "^1.8.2",
"react-select": "^2.4.4",
"react-simple-maps": "^0.12.1",
"react-sizeme": "^2.6.7",
"react-slick": "^0.26.1",
"react-sortable-tree": "^2.6.2",
"react-sortable-tree-theme-file-explorer": "^2.0.0",
"react-sparklines": "^1.7.0",
"react-sticky-el": "^1.0.20",
"react-stickynode": "^2.1.1",
"react-svg-gauge": "^1.0.10",
"react-sweet-progress": "^1.1.2",
"react-switch": "^4.1.0",
"react-syntax-highlighter": "^10.3.5",
"react-table": "^7.7.0",
"react-textarea-autosize": "^7.1.0",
"react-to-pdf": "0.0.14",
"react-toastify": "^5.4.0",
"react-transition-group": "^1.2.1",
"react-validation": "^3.0.7",
"react-vertical-timeline-component": "^2.5.0",
"react-visibility-sensor": "^5.1.1",
"react-widgets": "^4.6.1",
"react-widgets-globalize": "^5.0.23",
"react-widgets-moment": "^4.0.30",
"react-widgets-simple-number": "^4.1.26",
"reactour": "^1.18.4",
"reactstrap": "^8.9.0",
"recharts": "^1.8.5",
"redux": "^4.1.0",
"redux-form": "^8.3.7",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rodal": "^1.6.3",
"sass": "^1.35.1",
"slick-carousel": "^1.8.1",
"styled-components": "^4.4.0",
"sweetalert": "2.1.2",
"sweetalert-react": "^0.4.11",
"sweetalert2": "^11.4.0",
"typescript": "^3.9.10",
"validator": "^12.1.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
"build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"webpack": "^4.28.4"
}
}
And here is the code from "/src/Layout/AppMain/index.js"
import { Router, Route, Switch, Redirect, useLocation } from 'react-router-dom';
import React, { Suspense, lazy, Fragment, useEffect } from "react";
import Loader from "react-loaders";
import { ToastContainer } from "react-toastify";
import PrivateRoutes from '../../utils/PrivateRoute';
import History from '../../utils/History';
const Login = lazy(() => import("../../Pages/Login"));
const AppMain = () => {
const location = useLocation()
if(location.pathname === '/')
{
History.replace('/applicant/analytics')
return <Redirect to="/applicant/analytics"/>
}
const suspenseFallback = (
<div className="loader-container">
<div className="loader-container-inner">
<div className="text-center">
<Loader type="ball-pulse"/>
</div>
<h6 className="mt-3">
Please wait while we load all the Applications examples
<small>Because this is a demonstration we load at once all the Applications examples. This wouldn't happen in a real live app!</small>
</h6>
</div>
</div>
)
return (
<Fragment>
<Suspense fallback={suspenseFallback}>
<Router history={History}>
<Switch>
<Route path="/applicant/login" component={Login} exact/>
<Route path="/" component={PrivateRoutes} />
</Switch>
</Router>
</Suspense>
<ToastContainer/>
</Fragment>
)
};
export default AppMain;
Please help me with getting the project up and running. Thanks, Mustafa.
I came across a weird bug in nextjs, when I am adding
<Head>
<link rel="canonical" href="url"></link>
</Head>
inside my index.tsx, one element inside that page does not render properly.
I do use
<FontAwesomeIcon icon={song.voted === true ? faHeart : fasHeart} className={`text-2xl color-text-red`} />
which has those standard classes added to it svg-inline--fa fa-youtube fa-w-18 text-2xl color-text-red.
The weird thing is that when the canonical tag is not added those classes do work correctly
After adding the tag, the width and svg-inline--fa does not get rendered (tried to refresh, restart server, prod en dev environment)
these are my dependency's
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-regular-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"autoprefixer": "^10.2.3",
"file-loader": "^6.2.0",
"mysql": "^2.18.1",
"next": "latest",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0",
"next-svgr": "0.0.2",
"next-transpile-modules": "^6.0.0",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-rainbow-components": "^1.24.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"tailwindcss": "^2.0.2"
has anyone ever seen this problem or has any ideas on how to fix it ?
thx in advance
probably too late for OP, but for future people it looks like this should answer the question.
add to _app.js
import "#fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;
source:
https://github.com/FortAwesome/react-fontawesome/issues/410#issuecomment-787468285
So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!
I'm trying to clone my Main component's prop to all it's children. I'm using cloneElement but I get an error stating "props is undefined".
It seem's others are having the same issue (https://github.com/wesbos/Learn-Redux-Starter-Files/issues/6)
This is the code for my main component:
import React from 'react';
import Nav from './Nav';
const Main = React.createClass({
render() {
return (
<div className="wrapper">
<Nav />
{React.cloneElement(this.props.children, { ...this.props, children: props.children.props.children })}
</div>
)
}
});
export default Main;
Here are my dependency versions:
"devDependencies": {
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-react-display-name": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"express": "^4.13.4",
"node-sass": "^3.4.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.2.6",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
},
"dependencies": {
"bulma": "0.0.18",
"classnames": "^2.2.3",
"react": "^15.1.0",
"react-addons-css-transition-group": "^15.0.1",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.4",
"redux": "^3.5.2",
"shuffle-array": "^1.0.0"
}
You just have to give your cloned the props like this
{React.cloneElement(this.props.children, this.props)}
Take into account that cloneElement is only working if you give ONE node to main children. If many do a loop like explained in the documentation