Below in my code. CSSTransition is not being recognized. It throws an error for some reason. I tried importing with and without braces, but it didn't seem to work.
import React, { Component } from 'react';
import styles from '../stylesheets/style.module.css';
import { CSSTransition } from 'react-transition-group';
class SlideShow extends Component {
state = {
backgroundColor: 'white',
changePic: true,
slideIndex: 1,
};
render() {
return (
<div className={styles.slideshowContainer}>
<CSSTransition
in={this.state.changePic}
timeout={{
enter: 2000,
exit: 800,
}}
classNames="slidePics"
unmountOnExit={true}
></CSSTransition>
</div>
);
}
}
export default SlideShow;
Two things:
Make sure to actually install react-transition-group
Import without curly braces
Related
Here's my slideshow.jsx file.I am trying to apply transition to a sample div containing Sample Text,but no transitions happening.
import React, { Component } from 'react';<br>
import styles from '../stylesheets/style.module.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
class SlideShow extends Component {
state = {
backgroundColor: 'white',
changePic: true,
slideIndex: 1,
};
render() {
console.log(this.state.changePic);
return (
<div className={styles.slideshowContainer}>
<CSSTransition
in={this.state.changePic}
timeout={2000}
classNames={styles.slidePics}
mountOnEnter={true}
>
<div>
<p>sample text</p>
</div>
</CSSTransition>
</div>
);
}
}
export default SlideShow;
Here is my style.module.css file.Following properties associated with slidePics are below.But these transitions are not working:-
.slidePics-enter {
opacity: 0;
}
.slidePics-enter-active {
opacity: 1;
transition: opacity 2000ms;
}
the issue is you dont have a class slidePics at your css modules to be mapped to styles. if you add an empty rule .slidePics { } solves the issue.
other viable approach, you could map your transictions as:
classNames={{
enter: styles['slidePics-enter'],
enterActive: styles['slidePics-enter-active'],
}}
update
you already have in prop as true, given initial state. in initial state needs to be false and then with some iteraction you would change to true with the classes enter enter-active.
by your code, you would like to perform transition on mount state but as the docs says css transition wont perform enter transition by default on first mount.
for that to happen, you need to pass appear={true} and in={true}. likewise create the classes .slidePics-appear .slidePics-appear-active like you have for enter classes.
Here's my component. When I use the SVG from within JSX, it renders OK:
import React from "react";
import Radium from 'radium';
import LogoSvg from '../../images/my_logo.svg';
class HeaderBar extends React.Component {
render () {
return (
<div>
<LogoSvg />
</div>
);
}
}
export default Radium(HeaderBar);
however, when I change to this, nothing is rendered. It's as if the backgroundImage isn't even taken in. Changing the backgroundImage to a simple background: 'red' works well. What am I doing wrong here?
import React from "react";
import Radium from 'radium';
import LogoSvg from '../../images/my_logo.svg';
class HeaderBar extends React.Component {
render () {
const style = {
backgroundImage: `url(data:image/svg+xml;utf8,${LogoSvg})`,
width: '500px',
height: '500px'
};
return (
<div style={style}>
</div>
);
}
}
export default Radium(HeaderBar);
I use webpack 4 with:
test: /\.svg$/,
use: [
{
loader: "babel-loader"
},
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
}
]
I believe it's because react-svg-loader will return a React component which renders an inline svg. You simply want the inline svg if you're using a data image. Maybe try svg-inline-loader instead.
I believe it can't find the path to your svg image because of the data:image/svg+xml;utf8, in front of it. It will work if you change it to:
const style = {
backgroundImage: `url(${LogoSvg})`,
width: '500px',
height: '500px'
};
or inline:
<div style={{backgroundImage: `url(${LogoSvg})`}>
I'm trying to implement some styling using Material-UI's withStyles method, however I'm not able to get classes as a prop. Any suggestions as to what I'm missing? I've included the relevant code below, but note that there is an <App> component in this file that I'm leaving out for brevity.
import React from 'react'
import ReactDOM from "react-dom";
import {Paper, Typography} from '#material-ui/core'
import {withStyles} from '#material-ui/core/styles'
import NavBar from "./navBar";
class Recipe extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('Recipe Did Mount')
}
render() {
const {recipeData, classes} = this.props;
return (
<Paper>
<Typography className={classes.recipeName}>{recipeData.name}</Typography>
<Typography className={classes.recipeIngredients}>{recipeData.ingredients}</Typography>
<Typography className={classes.recipeInstructions}>{recipeData.instructions}</Typography>
</Paper>
)
}
}
const styles = {
root: {
fontSize: "1.0rem",
margin: "0px"
},
recipeName: {
fontSize: "1.0rem",
margin: "0px"
},
recipeIngredients: {
fontSize: "1.0rem",
margin: "0px" },
recipeInstructions: {
fontSize: "1.0rem",
margin: "0px" }
};
withStyles(styles)(Recipe);
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<App/>,
document.body.appendChild(document.createElement('div')),
)
});
Since you aren't setting withStyles(styles)(Recipe); into a variable, I suspect you must be using Recipe directly within App.
withStyles doesn't change Recipe. withStyles creates a new component that wraps Recipe and passes the classes prop to it. In order to see the classes prop, you need to use the newly-created component with something like the following:
const StyledRecipe = withStyles(styles)(Recipe);
const App = ()=> {
return <StyledRecipe/>;
}
Assuming App is defined in a separate file (for others who may come looking for this question), change the
`withStyles(styles)(Recipe);`
To
export default withStyles(styles)(Recipe);
As Ryan already explained ' withStyles is the higher order component that creates and returns a new component'
I've got a simple React App going on. My index.js file looks, of course, like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Going deeper, my App.js file declares an App extends Compoennt class, which contains my to-be-rendered elements and their functions:
import React, { Component } from "react";
import logo from "./SmartTransit_logo.png";
import MyButton from "./components/MyButton";
import "./App.css";
import { isWallet, helloWorld } from "./services/neo-service";
class App extends Component {
state = {
inputValue: ""
};
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Smart Transit Live Demo</h1>
</header>
<div style={{ width: 500, margin: "auto", marginTop: 10 }}>
<MyButton
buttonText="My Button"
onClick={ params => {helloWorld();}}
/>
</div>
</div>
);
}
}
export default App;
And the declaration of MyButton from /components/MyButton:
import React, { Component } from "react";
import PropTypes from "prop-types";
class MyButton extends Component {
render() {
return (
<button className="MyButton"
value = {this.props.buttonText}
>
{this.props.children}
</button>
);
}
}
MyButton.propTypes = {
buttonText: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
};
export default MyButton;
Finally, the declaration for helloWorld() is done like so (NOTE: neon-js is an npm package I'm using):
import { wallet } from "#cityofzion/neon-js";
export function isWallet(address) {
console.log(wallet.isAddress(address));
return wallet.isAddress(address);
}
export function helloWorld() {
console.log("Hello world");
return 1;
}
My problem is that the resulting Button doesn't get its value text rendered, and although it gets the CSS code for it just fine, it appears empty!
Not only that, but pressing it doesn't log a "Hello World" in the console, as it should, so it's even disconnected from its onClick function.
Any idea on what I'm doing wrong?
Buttons don't receive a "value" prop. The text inside of the button element is what gives it its text.
The button does appear to accept children to use as button text, but no children is actually being passed down to it. this.props.children is the content between JSX tags when the component is rendered.
React doesn't add the event handlers to elements automatically. You have to pass them along yourself in order for them to be properly triggered.
With that in mind, here's how you should render your button in App:
<MyButton onClick={() => helloWorld()}>
My Button
</MyButton>
And here's how MyButton's code should look:
class MyButton extends Component {
render() {
return (
<button className="MyButton" onClick={this.props.onClick}>
{this.props.children}
</button>
)
}
}
As you can see, the buttonText prop is no longer required; that's what the children prop is for.
You need to define super(props) in class constructor when you are going to use this.props
constructor(props) {
super(props);
}
Define this in MyButton component.
The problem is, you are not calling onClick method from mybutton component and button take it's value between it's opening and closing tag.
Use this code:
this.props.onClick()}> {this.props.buttonText}
I need to use react addons, ReactCSSTransitionGroup, but still I have error Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined.
I have react, react-dom and ReactCSSTransitionGroup v: 15.4.2, so shouldn't have problem with it. I have installed react-addons-css-transition-group via mpn.
import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
I add to webpack configuration
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
but it didn't help
I use it in index.js (in Alert folder):
import React, { PropTypes } from 'react';
import BasicAlert from './basicAlert';
import {
alertsWrapper,
enter,
enterActive,
leave,
leaveActive,
} from './alertsHandler.scss';
import CSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const AlertsHandler = ({ closeTime, alerts = [] }) => (
<div className={alertsWrapper}>
<ReactCSSTransitionGroup
transitionName={{
enter,
enterActive,
leave,
leaveActive,
}}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{alerts.map(item => (
<BasicAlert
closeTime={closeTime}
{...item}
key={`alert${item.id}`}
/>
))}
</ReactCSSTransitionGroup>
</div>
);
AlertsHandler.propTypes = {
closeTime: PropTypes.number,
alerts: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
type: PropTypes.string,
alertContent: PropTypes.node,
repeated: PropTypes.number,
})),
};
export default AlertsHandler;
and import in App.js:
import React from 'react';
import Alert from '../components/Alerts';
var example = 'whatever';
export default class App extends React.Component {
render() {
return (
<div>
<Alert closeTime={3000} alerts={example} />
</div>);
}
}
I try to import: import React, { PropTypes } from 'react/addons'; and import { __Addons as addons, PropTypes } from 'react' but it give me error canno't read property addons of undefine. I even tryed to import directly from node_modules or use depreciate module react-addons.
I'm not sure, but I think there is problem with import react-with-addons, but I can't find properly way to do it.
If I gave to less information, please ask.
In my case, I was using a className prop on my CSSTransition component. It should be classNames. Spent hours figuring that out... just posting in case it helps somebody.
ReactCSSTransitionGroup is not a export from the main React package.
Just remove the third line const ReactCSSTransitionGroup = ....
import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
This should work
Update 1:
Subsequent error being thrown can be resolved like so
In index.js (in Alert folder):
import React, { PropTypes } from 'react';
...
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const AlertsHandler = ({ closeTime, alerts = [] }) => (
<div className={alertsWrapper}>
<ReactCSSTransitionGroup
...
</ReactCSSTransitionGroup>
</div>
);
...