I am trying to create a simple checkbox using reactJS and trying to bind the state of the checkbox using handlecheck()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<title>Getting Started with React</title>
</head>
<body>
<div id='react-container'></div>
<script type="text/babel">
class Checkbox extends React.Component{
constructor(props){
super(props)
this.state = {
checked: false
}
this.handleCheck = this.handleCheck.bind(this)
}
handleCheck(){
this.setState ({
checked: true
})
}
render(){
return(
<div>
<input type = "checkbox"/>
</div>
)
}
}
ReactDOM.render(
<Checkbox />,
document.getElementById("react-container")
)
</script>
</body>
</html>
But, here even though I am using
handleCheck(){
this.setState ({
checked: true
})
}
I am still able to check and uncheck the box multiple time, but in reality, it shouldn't as it has to check it once and should stop.
I know that in the actual scenario it should be something like:
handleCheck(){
this.setState ({
checked: !this.state.checked
})
}
Can someone tell me why am I able to check and uncheck multiple times even though I am doing it wrong?
You are create a controlled component, which need a handler to change the state, and it's value/checked properties are controlled by the state.
You need to assign this.handleCheck as the onChange handler, and this.state.checked as the checked property value:
class Checkbox extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: false
}
this.handleCheck = this.handleCheck.bind(this)
}
handleCheck() {
this.setState({
checked: true
})
}
render() {
return (
<div>
<input
type="checkbox"
checked={this.state.checked}
onChange={this.handleCheck}
/>
</div>
)
}
}
ReactDOM.render(
<Checkbox /> ,
document.getElementById("react-container")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='react-container'></div>
You forgot to add handleCheck to your checkbox
<div>
<input type = "checkbox" onChange={this.handleCheck} checked={this.state.checked}/>
</div>
Related
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 2 years ago.
Hello guys, so I found interesting task about React, and I a little bit don't understand how to solve it
Task: Why this code is not working? Solve this.
Code:
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
}
handler() {
this.setState({count: this.state.count++})
}
render() {
console.log('render')
return (
<div>
<button onClick={this.handler}>Add 1</button>
<p>{this.state.count}</p>
</div>
);
}
}
ReactDOM.render(
<Test />,
document.getElementById("test"));
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="test"></div>
</body>
</html>
You sent wrong function reference.
It should be like this.
<button onClick={this.handler.bind(this)}>Add 1</button>
or
<button onClick={() => this.handler()}>Add 1</button>
I am trying to use an image hover effect library in React. Here is the library. The library uses Three.js and GSAP to animate images. I've built a small example project with this library in a vanilla JS file.
I was able to build it easily like this. Here is my HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css"/>
<title></title>
</head>
<body>
<div class="container">
<div class="distortion">
</div>
<div class="distortion2">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js" integrity="sha256-3mBEX8I0uMLF7+AUjJeTCelosuorzYpqwBMBPDTyQqY=" crossorigin="anonymous"></script>
<script src="./hover.js"></script>
<script src="./app.js"></script>
</body>
</html>
And here is my JS file:
new hoverEffect({
parent: document.querySelector(".distortion"),
intensity: 1,
image1: "./images/kaapo.jpg",
image2: "./images/kakko-rangers.jpg",
displacementImage: "./images/ladyliberty3.png"
});
new hoverEffect({
parent: document.querySelector(".distortion2"),
intensity: 1,
image1: "./images/jack.jpg",
image2: "./images/hughes-card.jpg",
displacementImage: "./images/devils-40.png"
});
Everything works, but now I'm trying to do something similar in a React project and I'm having trouble using this library in React.
Here is what I've tried:
import React, { Component } from 'react';
import hoverEffect from 'hover-effect';
import kakko from '../assets/kaapo.jpg';
import {kakkoRangers} from '../assets/kakko-rangers.jpg';
import {ladyLiberty} from '../assets/ladyliberty3.png';
import styled, { css } from 'styled-components';
const STYLES = styled.div`
height: 100vh;
width: 100%;
.my-div {
height: 20em;
width: 30em;
}
`;
class Test extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount = () => {
}
render() {
const animation = new hoverEffect({
parent: document.querySelector('.my-div'),
intensity: 0.3,
image1: {kakko},
image2: {kakkoRangers},
displacementImage: {ladyLiberty}
});
return (
<STYLES>
<div>
<h1>Test</h1>
<div className="my-div">
</div>
</div>
</STYLES>
);
}
}
export default Test;
I don't think document.querySelector('.my-div') is working in my animation variable. Do querySelectors not work in React? How can I properly select the div?
How could I implement this in React? I tried nesting the animation variable in componentDidMount but that didn't work either.
Usually when you want to directly access DOM elements in React you use the ref keyword:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
More at the React documentation.
New to ReactJS,
Can not find out why this page is not showing anything -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="react.16.8.6.development.js"></script>
<script src="react-dom.16.8.6.development.js"></script>
<script src="babel.7.5.4.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class MyClass extends React.Componet{
render() {
return(<h1>Hello React Componets!</h1>);
}
}
ReactDOM.render(
<h1>MyClass</h1>,
document.getElementById('container')
);
</script>
</body>
</html>
I am getting error in console -
VM43:19 Uncaught TypeError: Super expression must either be null or a function at _inherits (:19:113)
at :26:3
at :42:2
Try these code:
<script type="text/babel">
class MyClass extends React.Component{
render() {
return(<h1>Hello React Componets!</h1>);
}
}
ReactDOM.render(
<h1><MyClass/></h1>,
document.getElementById('container')
);
</script>
Your problem is here,
<h1>MyClass</h1>, //This is not a react component, this will only print `MyClass` as text on page
Just change,
ReactDOM.render(
<h1>MyClass</h1>,
document.getElementById('container')
);
to this,
ReactDOM.render(
<MyClass />,
document.getElementById('container')
);
Note: Correct the typo in your code,
class MyClass extends React.Componet should be class MyClass extends React.Component{
Demo
I'm starting with Polymer 3 and I'm facing an issue I cannot solv.
I have a custom element which will show a play card; its only property is an object with its suit and number. The element is more or less like this:
import {html, PolymerElement} from '#polymer/polymer/polymer-element.js';
class CardElement extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
`;
}
static get properties() {
return {
card: {
type: Object,
value: () => {
return {
suit: 'hearts',
figure: 'king'
}
}
},
};
}
ready() {
super.ready();
console.log(this.card.figure);
}
}
window.customElements.define('card-element', CardElement);
Next I want to check that every thing is working with and HTML file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>card-element demo</title>
<script src="../node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
import '#polymer/iron-demo-helpers/demo-pages-shared-styles';
import '#polymer/iron-demo-helpers/demo-snippet';
</script>
<script type="module" src="../card-element.js"></script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic card-element demo</h3>
<demo-snippet>
<template>
<card-element card='{"suit" "hearts", "figure" "1"}'></card-element>
</template>
</demo-snippet>
</div>
</body>
</html>
Console.log in ready method shows that data is binded but, whenever I try to pass a json data returned from a function, the console.log show "undefined".
<body>
<div class="vertical-section-container centered">
<h3>Basic card-element demo</h3>
<demo-snippet>
<template>
<card-element card="{{_getCard}}"></card-element>
</template>
</demo-snippet>
</div>
<script>
function _getCard() {
return JSON.stringify({
"suit": "clubs",
"figure":"1"
});
}
</script>
</body>
I checked loading data returned into a variable and binding the variable to the custom element but still didn't work.
How should I pass the data to the custom element?
Thanks for your answers.
Try this:
<script>
function _getCard() {
let data = {
"suit": "clubs",
"figure":"1"
};
return data;
}
</script>
I am tring to do react using below code but I am not getting html
element in the browser. There is no error in the console.
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var reactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<reactTest />,document.getElementById('test'));
</script>
</body>
</html>
Can someone please help on this.
If a React Class name starts with a lowercase letter then no methods inside the class get called, i.e. nothing Renders, and you don't get any error message in the Browser console,
because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter, so always use Upper Case.
Instead of reactTest use this: ReactTest it will work.
As per DOC:
User-Defined Components Must Be Capitalized.
When an element type starts with a lowercase letter, it refers to a
built-in component like <div> or <span> and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like <Foo /> compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.
Check the working code:
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById('test'));
</script>
</body>
</html>
The following works fine, try it :
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById('test'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test" ></div>
const Some = ()=> <div />
<Some />
will work,
but
const some = () => <div />
<some />
won't work