CSS transformation ceases to function when translated to React code:
I translated this code here:
https://codepen.io/desandro/pen/LmWoWe
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
into a React equivalent here, but it ceases to function.
http://jsfiddle.net/95qeyhm0/
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
front: true
}
}
clickHandler = () => {
this.setState((prevState) => {
return {front: !prevState.front};
});
}
render() {
alert('render called: ' + this.state.front)
return (
<div className="scene scene--card" onClick={this.clickHandler}>
<div className={!this.state.front ? 'card' : 'is-flipped'}>
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
I verified that the state was toggling between true and false but and used the Chrome inspector to verify that the className was being toggled as well.
However the output remains the same ( it does not flip in the React version)
javascript css reactjs transform
add a comment |
I translated this code here:
https://codepen.io/desandro/pen/LmWoWe
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
into a React equivalent here, but it ceases to function.
http://jsfiddle.net/95qeyhm0/
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
front: true
}
}
clickHandler = () => {
this.setState((prevState) => {
return {front: !prevState.front};
});
}
render() {
alert('render called: ' + this.state.front)
return (
<div className="scene scene--card" onClick={this.clickHandler}>
<div className={!this.state.front ? 'card' : 'is-flipped'}>
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
I verified that the state was toggling between true and false but and used the Chrome inspector to verify that the className was being toggled as well.
However the output remains the same ( it does not flip in the React version)
javascript css reactjs transform
add a comment |
I translated this code here:
https://codepen.io/desandro/pen/LmWoWe
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
into a React equivalent here, but it ceases to function.
http://jsfiddle.net/95qeyhm0/
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
front: true
}
}
clickHandler = () => {
this.setState((prevState) => {
return {front: !prevState.front};
});
}
render() {
alert('render called: ' + this.state.front)
return (
<div className="scene scene--card" onClick={this.clickHandler}>
<div className={!this.state.front ? 'card' : 'is-flipped'}>
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
I verified that the state was toggling between true and false but and used the Chrome inspector to verify that the className was being toggled as well.
However the output remains the same ( it does not flip in the React version)
javascript css reactjs transform
I translated this code here:
https://codepen.io/desandro/pen/LmWoWe
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
into a React equivalent here, but it ceases to function.
http://jsfiddle.net/95qeyhm0/
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
front: true
}
}
clickHandler = () => {
this.setState((prevState) => {
return {front: !prevState.front};
});
}
render() {
alert('render called: ' + this.state.front)
return (
<div className="scene scene--card" onClick={this.clickHandler}>
<div className={!this.state.front ? 'card' : 'is-flipped'}>
<div className="card__face card__face--front">front</div>
<div className="card__face card__face--back">back</div>
</div>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
I verified that the state was toggling between true and false but and used the Chrome inspector to verify that the className was being toggled as well.
However the output remains the same ( it does not flip in the React version)
javascript css reactjs transform
javascript css reactjs transform
asked Nov 19 at 23:17
user9723618
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
In your render function card and is-flipped are mutually exclusive but your flipped styles are scoped to .card.is-flipped.
Update your card className logic to:
<div className={`card ${!this.state.front && "is-flipped"}`}>
Updated Fiddle
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384011%2fcss-transformation-ceases-to-function-when-translated-to-react-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
In your render function card and is-flipped are mutually exclusive but your flipped styles are scoped to .card.is-flipped.
Update your card className logic to:
<div className={`card ${!this.state.front && "is-flipped"}`}>
Updated Fiddle
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
add a comment |
In your render function card and is-flipped are mutually exclusive but your flipped styles are scoped to .card.is-flipped.
Update your card className logic to:
<div className={`card ${!this.state.front && "is-flipped"}`}>
Updated Fiddle
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
add a comment |
In your render function card and is-flipped are mutually exclusive but your flipped styles are scoped to .card.is-flipped.
Update your card className logic to:
<div className={`card ${!this.state.front && "is-flipped"}`}>
Updated Fiddle
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
In your render function card and is-flipped are mutually exclusive but your flipped styles are scoped to .card.is-flipped.
Update your card className logic to:
<div className={`card ${!this.state.front && "is-flipped"}`}>
Updated Fiddle
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
edited Nov 19 at 23:31
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
answered Nov 19 at 23:24
Brian Hadaway
1,6731121
1,6731121
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384011%2fcss-transformation-ceases-to-function-when-translated-to-react-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
