How to prevent react component click event bubble to document? - javascript

How to prevent react component click event from bubble up to document ?
I can sure that there must be something was wrong with it!
So, may be I should help myself fix it!
I just have a box component which has a click event listener, and there are some link components in that box which are effected by a document click event. How can I remove this document click event?
Can someone do me a favor?
More details info can be found in following links!
Here is the code link : https://github.com/ant-design/ant-design/issues/6576
Click has no effect, it should link to item3!
Remove document's click event
After that, it works!
What's wrong with this?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';
// import SideBox from './SideBox.js';
// import ContentBox from './ContentBox.js';
/*import SidebarExample from './test.js';*/
// import ReactDOMServer from 'react-dom/server';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Item1 from './components/Item1.js';
import Item2 from './components/Item2.js';
import Item3 from './components/Item3.js';
import {Menu, Icon} from 'antd';
import 'antd/dist/antd.css';
const SubMenu = Menu.SubMenu;
const element = <h1>Hello, world</h1>;
const elements = () => {
return(
<h1>Hello, world</h1>
);
};
const routes = [
{
path: '/',
exact: true,
sidebar: () => <div>item1</div>,
main: () => <div><Item1 /></div>
},
{
path: '/item2',
sidebar: () => <div>item2</div>,
main: () => <div><Item2 /></div>
},
{
path: '/item3',
sidebar: () => <div>item3</div>,
main: () => <div><Item3 /></div>
}
]
class App extends Component {
constructor(props) {
super(props);
this.state = {
message: props.message,
styles: props.styles,
Any: props.any,
width: props.width,
theme: 'dark',
current: '1'
};
this.handleMenuClick = this.handleMenuClick.bind(this);
this.handleClick = this.handleClick.bind(this);
};
handleClick(e) {
console.log('click ', e);
this.setState({
current: e.key,
});
};
// ES7 property initializer syntax
handleMenuClick = (e) => {
e.preventDefault();
// e.stopPropagation();
// e.nativeEvent.stopImmediatePropagation();
console.log('this is:', this);
console.log("clicked === \n", e);
if(this.state.styles === "App-SideBox-init"){
this.setState({
message: "e.key",
styles: "App-SideBox-New",
width: "width: 40px;"
});
}
if(this.state.styles === "App-SideBox-New"){
this.setState({
message: "Hello!",
styles: "App-SideBox-init",
width: "width: 300px;"
});
}
console.log("this.state.message === ", this.state.message);
console.log("this.state.styles === ", this.state.styles);
};
componentDidMount() {
/*window.addEventListener('scroll', this.onScroll.bind(this), false);*/
// window.removeEventListener('click', this.handleMenuClick.bind(this), false);
// window.removeEventListener('click', this.handleClick.bind(this), false);
};
render() {
return (
<div className="App">
<div className="App-header">
<img id="img" src={logo} className="App-logo" alt="logo" style={this.props.width}/>
<h2>Welcome to React</h2>
</div>
<div className="App-SideBox">
<div className={this.state.styles}>
<Router>
<div>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '30%',
background: '#f0f0f0'
}}>
<div className="SideBox-body" style={{ display: 'flex' }}>
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 240 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}
>
<Menu.Item key="1">
<Link to="/"> item1</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/item2">item2</Link>
</Menu.Item>
<Menu.Item key="3">
<Link to="/item3">item3</Link>
</Menu.Item>
</SubMenu>
</Menu>
</div>
</div>
</div>
</div>
</Router>
</div>
{/*onClick={this.handleMenuClick}*/}
<div onClick={this.handleMenuClick} className="App-SideBox-btn">
<span>icon</span>
</div>
</div>
<div className="App-body">
<Router>
<div>
<div>
<div style={{ flex: 1, padding: '10px' }}>
{
routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))
}
</div>
</div>
</div>
</Router>
</div>
</div>
);
}
};
App.defaultProps = {
message: 'Hello!',
styles: 'App-SideBox-init'
};
App.propTypes = {
message: PropTypes.string.isRequired,
styles: PropTypes.string.isRequired,
width: PropTypes.string
};
export default App;

Just make all event handlers on the parent component, and then pass them to children by using props!

Related

How can I add a route on a modal using react.js?

I am using React.js but I don't achieve to switch modal. Here is my code :
import React from "react";
import ReactDOM from "react-dom";
import moment from "moment";
import { Modal, version, Button } from "antd";
import "antd/dist/antd.css";
import { BrowserRouter, Link, Redirect, Route, Switch } from "react-router-dom";
import Clickthere from "Clickthere";
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true
});
};
handleOk = (e) => {
console.log(e);
this.setState({
visible: false
});
};
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false
});
};
render() {
return (
(
<div>
<Button type="primary" onClick={this.showModal}>
Open
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p style={{ textAlign: "center" }}>
Other thing?{" "}
<BrowserRouter>
<Link to="/clickthere">
<i className="fas fa-user-plus" /> Click there
</Link>
</BrowserRouter>
</p>
</Modal>
</div>
),
(
<BrowserRouter>
<Switch>
<Route path="/clickthere" component={Clickthere} />
</Switch>
</BrowserRouter>
)
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
I achieve to open the first modal but I don't achieve when I click on "Click there" nothing happen...
Here is the code of the component Clickthere :
import { Modal } from "react-bootstrap";
import React from "react";
import { BrowserRouter, Switch } from "react-router-dom";
const Clickthere = (props) => {
console.log(props);
return (
<>
<Modal>
<div>
<p>This is a test.</p>
</div>
</Modal>
<BrowserRouter>
<Switch></Switch>
</BrowserRouter>
</>
);
};
export default Clickthere;
Do you know why it does not work ?
Thank you very much !
Here is my code : My code

Why does a useCallback option have to be called with a class component in Reactjs?

I am stumped. I have been trying to get a simple cleartext button to work. I have tried all the option available on this platform but nothing is working for me. React Hook useCallback cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook. I have no idea why this error is occurring. I am pretty new to react can anyone please help? I am trying to clear the text on a click of the clear button.
import React, { Component, useCallback, useState } from "react";
import {
Button,
Input,
Footer,
Card,
CardBody,
CardImage,
CardTitle,
CardText
} from "mdbreact";
import blankImg from "./blank.gif";
import "./style.css";
import "./flags.min.css";
import countriesList from "./countries.json";
class App extends Component {
state = {
search: ""
};
renderCountry = country => {
const { search } = this.state;
var code = country.code.toLowerCase();
const handleClick = useCallback(() => {
e.target.value = '';
}, []);
return (
<div className="col-md-3" style={{ marginTop: "20px" }}>
<Card>
<CardBody>
<p className="">
<img
src={blankImg}
className={"flag flag-" + code}
alt={country.name}
/>
</p>
<CardTitle title={country.name}>
{country.name.substring(0, 15)}
{country.name.length > 15 && "..."}
</CardTitle>
</CardBody>
</Card>
</div>
);
};
onchange = e => {
this.setState({ search: e.target.value });
};
render() {
const { search } = this.state;
const filteredCountries = countriesList.filter(country => {
return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
});
return (
<div className="flyout">
<main style={{ marginTop: "4rem" }}>
<div className="container">
<div className="row">
<div className="col">
<Input
label="Search Country"
icon="search"
onChange={this.onchange}
/>
<button onClick={handleClick}> Click to clear</button>
</div>
<div className="col" />
</div>
<div className="row">
{filteredCountries.map(country => {
return this.renderCountry(country);
})}
</div>
</div>
</main>
<Footer color="indigo">
<p className="footer-copyright mb-0">
© {new Date().getFullYear()} Copyright
</p>
</Footer>
</div>
);
}
}
export default App;
It is because you try to use hooks in a class based component. You can only use hooks like useCallback in functional components. Therefore you are mixing the concepts of object oriented and functional programming.
The following should do the trick:
import React, { Component, useCallback, useState } from "react";
import {
Button,
Input,
Footer,
Card,
CardBody,
CardImage,
CardTitle,
CardText
} from "mdbreact";
import blankImg from "./blank.gif";
import "./style.css";
import "./flags.min.css";
import countriesList from "./countries.json";
class App extends Component {
state = {
search: ""
};
const handleClick = (e) => {
e.target.value = '';
};
renderCountry = country => {
const { search } = this.state;
var code = country.code.toLowerCase();
return (
<div className="col-md-3" style={{ marginTop: "20px" }}>
<Card>
<CardBody>
<p className="">
<img
src={blankImg}
className={"flag flag-" + code}
alt={country.name}
/>
</p>
<CardTitle title={country.name}>
{country.name.substring(0, 15)}
{country.name.length > 15 && "..."}
</CardTitle>
</CardBody>
</Card>
</div>
);
};
onchange = e => {
this.setState({ search: e.target.value });
};
render() {
const { search } = this.state;
const filteredCountries = countriesList.filter(country => {
return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
});
return (
<div className="flyout">
<main style={{ marginTop: "4rem" }}>
<div className="container">
<div className="row">
<div className="col">
<Input
label="Search Country"
icon="search"
onChange={this.onchange}
/>
<button onClick={this.handleClick}> Click to clear</button>
</div>
<div className="col" />
</div>
<div className="row">
{filteredCountries.map(country => {
return this.renderCountry(country);
})}
</div>
</div>
</main>
<Footer color="indigo">
<p className="footer-copyright mb-0">
© {new Date().getFullYear()} Copyright
</p>
</Footer>
</div>
);
}
}
export default App;
useCallback hooks can only be used in functional components OR in a custom Hook NOT in class components.
You have declared your App component in class based approach i.e. Object oriented approach. To use useCallback hook for this, you should change your App component declaration to a functional component or Custom hook.
Something like this
function App() {
return (
<>Hello World!</>
);
}
you cannot useCallBack hook in class Component,we can do a simple thing to clear the button text, by using
a button text state, i.e. { btnTxt: "Clear ButtonText"} than update the state onclick
import React, { Component, useCallback, useState } from "react";
import {
Button,
Input,
Footer,
Card,
CardBody,
CardImage,
CardTitle,
CardText
} from "mdbreact";
import blankImg from "./blank.gif";
import "./style.css";
import "./flags.min.css";
import countriesList from "./countries.json";
class App extends Component {
state = {
search: "",
btnTxt: "Clear ButtonText"
};
renderCountry = country => {
const { search } = this.state;
var code = country.code.toLowerCase();
return (
<div className="col-md-3" style={{ marginTop: "20px" }}>
<Card>
<CardBody>
<p className="">
<img
src={blankImg}
className={"flag flag-" + code}
alt={country.name}
/>
</p>
<CardTitle title={country.name}>
{country.name.substring(0, 15)}
{country.name.length > 15 && "..."}
</CardTitle>
</CardBody>
</Card>
</div>
);
};
onchange = e => {
this.setState({ search: e.target.value });
};
render() {
const { search } = this.state;
const filteredCountries = countriesList.filter(country => {
return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
});
return (
<div className="flyout">
<main style={{ marginTop: "4rem" }}>
<div className="container">
<div className="row">
<div className="col">
<Input
label="Search Country"
icon="search"
onChange={this.onchange}
/>
<button onClick={()=> this.setState({btnText:""})}> {this.state.btnTExt}</button>
</div>
<div className="col" />
</div>
<div className="row">
{filteredCountries.map(country => {
return this.renderCountry(country);
})}
</div>
</div>
</main>
<Footer color="indigo">
<p className="footer-copyright mb-0">
© {new Date().getFullYear()} Copyright
</p>
</Footer>
</div>
);
}
}
export default App;

TypeError: Cannot read property 'renderView' of null

I am trying to create a main page with 2 buttons in React.js: Option 1 and Option 2. If a user clicks on Option 1, this user should be redirected to Main1 page. If he/she clicks on Option 2, then this user is redirected to Main2. Sounds quite simple, but I get the following error:
TypeError: Cannot read property 'renderView' of null
App.render
C:/test/src/App.js:15
12 |
13 | render() {
14 |
> 15 | switch (this.state.renderView) {
| ^ 16 | case 1:
17 | return (
18 | <div className="App">
This is my code of App.js:
import React, { Component } from 'react';
import './App.css';
import { Header } from './components/Header';
import { Header1 } from './components/xai/Header1';
import { Header2 } from './components/fairness/Header2';
import { Main } from './components/Main';
import { Main1 } from './components/xai/Main1';
import { Main2 } from './components/fairness/Main2';
class App extends Component {
clickBtn = e => {
console.log(e.target.value);
this.setState({
renderView: +e.target.parentNode.value
});
};
render() {
switch (this.state.renderView) {
case 1:
return (
<div className="App">
<div className="App-header">
<Header1 />
</div>
<div className="App-main">
<Main1 />
</div>
</div>
);
case 2:
return (
<div className="App">
<div className="App-header">
<Header2 />
</div>
<div className="App-main">
<Main2 />
</div>
</div>
);
default:
return (
<div className="App">
<div className="App-header">
<Header />
</div>
<div className="App-main">
<Main clickBtn={this.clickBtn} />
</div>
</div>
);
}
}
}
export default App;
This is the code of Main.js where I have two buttons:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Grid from "#material-ui/core/Grid";
import CssBaseline from "#material-ui/core/CssBaseline";
import Card from "#material-ui/core/Card";
import CardContent from "#material-ui/core/CardContent";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles({
card: {
minWidth: 350
},
button: {
fontSize: "12px",
margin: "theme.spacing.unit",
minWidth: 350
},
extendedIcon: {
marginRight: "theme.spacing.unit"
},
title: {
fontSize: '20px',
minWidth: 350,
margin: "theme.spacing.unit"
}
});
export function Main() {
const classes = useStyles();
return (
<React.Fragment>
<CssBaseline />
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Card className={classes.card}>
<Typography align="center" className={classes.title}>
Select the option
</Typography>
<CardContent>
<Grid item xs={3}>
<Button
variant="contained"
size="medium"
color="primary"
className={classes.button}
value="1"
onClick={this.props.clickBtn}
>
Option 1
</Button>
</Grid>
<Grid item xs={3}>
<Button
variant="contained"
size="medium"
color="primary"
className={classes.button}
value="2"
onClick={this.props.clickBtn}
>
Option 2
</Button>
</Grid>
</CardContent>
</Card>
</Grid>
</React.Fragment>
);
}
How to fix this issue?
If other classes should be provided here, please let me know.
You didn't create state for the App component:
class App extends Component {
state = {renderView: null}
render(){
...
And note that this.clickBtn is undefined too, so you gotta define it.
since Main.js is a functional component it doesn't include the this keyword.
export function Main(props){
....
onClick={props.clickBtn}

Passing data from parent to child component (MaterialUI make styles)?

I'm quite new to reactjs and I'm working on a simple page that uses authentication using state. Also, for styling I'm using MaterialUI framework.
I'm trying to send the loggedInStatus prop.
I think I'm sending the props correctly, but I think that I'm messing my code with receiving the props... :S
My App.js is as follows:
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/home/Home';
import SignIn from './components/auth/SignIn';
import Contacto from './components/contacto/Contacto'
import FamCatalog from './components/famCatalog/FamCatalog'
import ProtectedRoute from './components/protected/ProtectedRoute'
import PageError from './components/404/PageError';
class App extends Component {
constructor() {
super();
this.state = {
loggedInStatus: 'NOT_LOGGED_IN',
user: {}
}
}
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route
exact
path='/'
render={props => (
<Home {...props} loggedInStatus={this.state.loggedInStatus} />
)}
/>
<Route path='/signin' component={SignIn} />
<ProtectedRoute path='/famcatalog' component={FamCatalog} />
<Route path='/contacto' component={Contacto} />
<Route path='*' component={PageError} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Then, the child component is as follows:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
function Nested() {
const classes = useStyles();
return (
<div className={classes.root} >
<h1>Status: {this.props.loggedInStatus}</h1>
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
...Blah, Blah, Blah...
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
...Blah, Blah, Blah...
</Typography>
</div >
)
}
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return <Nested />
}
}
export default Home;
I can't get the props. I still have the error: "TypeError: Cannot read property 'props' of undefined" and also have a warning saying Useless constructor for the constructor created inside Home class.
I'm trying to implement the workflow explained in: https://www.youtube.com/watch?v=zSt5G3s3OJI inside my code. As I didn't have a class component, I needed to re-arranged my Home component to satisfy the class component following the guidelines in (maybe here is the error...):
https://material-ui.com/styles/advanced/
Any tip of advice in what I'm doing wrong will be very well received!
Thanks in advance!
EDIT
In order to responder #HermitCrab, my new Home.js component:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
class Home extends Component {
constructor(props) {
super(props);
}
function Nested() {
const classes = useStyles();
return (
<div className={classes.root} >
{/* <h1>Status: {this.props.loggedInStatus}</h1> */}
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
... some text ...
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
... some text ...
</Typography>
</div >
)
}
render() {
return <Nested />
}
}
export default Home;
And I'm getting this error: error
thanks in advance!
EDIT #2
I'm trying a couple of things. Here is a way I introduced the function content into the Home Component:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
class Home extends Component {
constructor(props) {
super(props);
}
render() {
const classes = useStyles();
return (
<div className={classes.root} >
{/* <h1>Status: {this.props.loggedInStatus}</h1> */}
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
... TEXT
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
... TEXT
</Typography>
</div >
)
}
}
export default Home;
In the local:3000 I'm getting the following error:
error in browser
I'm quite lost here. How do I include the nested function inside the Home class to get the props?
Any tip of advice will be very well received.
Thanks in advance!
Your function Nested is outside of your Home component, therefore this is undefined and you can't access this.props. You have to move your Nested function inside your Home component if you want to be able to access the props passed to Home

react-carousel-slider doesn't rerender

guys! Have a problem with rerendering of slider component. After choosing another SELECT option, other images are to be loaded to carousel component. But!! Nothing happens! Props of component are being changed, and developer tools show slides (images) are changed, but nothing happens on DOM.
Below i post code. What do you think? Where is the problem?
import React from 'react';
import CarouselSlider from "react-carousel-slider";
import { FormControl } from 'react-bootstrap';
class StampChoose extends React.Component {
changeSamplesType = (e) => {
const sampleType = e.target.value;
this.props.changeSamplesType(sampleType);
this.forceUpdate();
}
render() {
let btnWrapperStyle = {
position: "relative",
borderRadius: "50%",
height: "50px",
width: "50px",
textAlign: "center"
}
let btnStyle = {
display: "inline-block",
position: "relative",
top: "90%",
transform: "translateY(-50%)",
fontSize: "36px"
}
let rBtnCpnt = (<div style = {btnWrapperStyle} >
<div style = {btnStyle} className = "material-icons" >
<i className="fas fa-angle-right"></i>
</div>
</div>);
let lBtnCpnt = (<div style = {btnWrapperStyle} >
<div style = {btnStyle} className = "material-icons" >
<i className="fas fa-angle-left"></i>
</div>
</div>);
let iconItemsStyle = {
padding: "0px",
background: "transparent",
margin:"0 5px",
height: "80%"
};
const titles = this.props.titles;
const slides = this.props.slides;
return (
<React.Fragment>
<FormControl componentClass="select" onChange={ this.changeSamplesType }>
<option value="type1">{ titles['type1'] }</option>
<option value="type2">{ titles['type2'] }</option>
<option value="type3">{ titles['type3'] }</option>
<option value="type4">{ titles['type4'] }</option>
</FormControl>
<CarouselSlider
sliderBoxStyle = {{height: "150px", width: "90%", background: "transparent", overflow: "hidden"}}
accEle = {{dots: false}}
newState={ this.state }
slideCpnts = {slides}
itemsStyle = {iconItemsStyle}
buttonSetting = {{placeOn: 'middle-outside'}}
rBtnCpnt = {rBtnCpnt}
lBtnCpnt = {lBtnCpnt}
/>
</React.Fragment>
)
}
}
export default StampChoose;
import React from 'react';
import { Grid, Row, Col, ControlLabel } from 'react-bootstrap';
import { samples, titles} from '../../../samples-stamps';
import StampChoose from './StampChoose';
const Sample = (props) => (
<React.Fragment>
{
<div>
<img src={ `images/samples/${props.img}` } alt={ props.title } />
</div>
}
</React.Fragment>
);
class StampsSamples extends React.Component {
state = {
sampleType: 'type1'
}
changeSamplesType = (sampleType) => {
this.setState({ sampleType });
}
render() {
const sampleType = this.state.sampleType;
let slides = Object.keys(samples[sampleType]).map((item, i) => {
return (
<div>
<Sample
key={i}
title={ samples[sampleType][item].title }
img={ samples[sampleType][item].img }
productId={ samples[sampleType][item].id }
/>
</div>
);
});
return (
<Grid>
<Row>
<Col md={ 4 }>
<ControlLabel>Примерный образец оттиска <br/>
<small>(выберите образец оттиска)</small>
</ControlLabel>
</Col>
<Col md={ 8 }>
<StampChoose
slides={ slides }
titles={ titles }
changeSamplesType={ this.changeSamplesType }
/>
</Col>
</Row>
</Grid>
);
}
}
export default StampsSamples;
In your Sample Component your returning an object inside of React.Fragment. Does it have anything to do with that? What if you remove the { and } inside there and try? Like below. Don't know if thats the issue but try. You also have an extra DIV in your map method for the slides. If you check the instructions for the React Carousel Slider they dont use these extra DIVs and {}
<React.Fragment>
<div>
<img src={ `images/samples/${props.img}` } alt={ props.title } />
</div>
</React.Fragment>

Categories