render(){
const { loading } = this.state;
return(
<div>
{!loading ? <input disabled type='text' /> : <input type='text' />}
</div>
)
}
Above jsx make sense? I didn't get any compliation error, just that I got a warning from react saying Unknown propdisabbedon <input> tag.
How to changed the attr of the button to disabled the correct way? Imagine if my input has lots of class of css, do I need to repeat them too? I felt it's redundant.
You don't need a conditional rendering on the input tag. You can do it the following way
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true
}
}
render(){
const { loading } = this.state;
return(
<div>
<input disabled={loading} type='text'/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<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="app"></div>
Related
My code has compiled successfully without any errors, but on my browser I'm getting this instead of output Target container is not a DOM element. Why is that? What am I missing?
I've tried React.createElement but it did not work.
import React from 'react';
import ReactDOM from 'react-dom'
class Greeting extends React.Component {
constructor (props){
super(props);
this.setState = {
name: '',
greeting: `Good ${this.props.time},`
}
this.onChange = this.onChange.bind(this)
}
onChange(e){
this.setState ({
name: e.target.value
})
}
render(){
return(
<div className="Container">
<section className="section" >
<label className="label">Name: </label>
<input className="input" name="name" placeholder="Enter your name" onChange={this.onChange} ></input>
</section>
<section>
<p>{this.state.greeting} {this.state.name}</p>
</section>
</div>
)
}
}
export default Greeting;
ReactDOM.render(React.createElement(<Greeting time="morning" />, document.getElementById('app')));
I expect it to show some output, but it does not.
If this is the root component remove export default Greeting;
You should pass the <Greeting /> component directly to the render function:
ReactDOM.render(<Greeting time="morning" />, document.getElementById('app'));
Also, make sure that you add an element to your index.html with id app.
<div id="app"></div>
I'm working in a form with React. My idea is to create a reusable Form component that gets the state from a Page component as props, and will hold the logic for updating its own state with children data, send it to parent Page component.
The Page component is this:
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input id="text1" data={this.state.data.text1} />
<Input id="text2" data={this.state.data.text2} />
</Form>
</div>
);
}
}
This is the Form component:
class Form extends Component {
constructor(props) {
super(props);
this.state = this.props.data;
}
render() {
return (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{this.state.text1}</div>
<div>{this.state.text2}</div>
</div>
{this.props.children}
</div>
);
}
}
And this the Input component:
class Input extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component</div>
<input id={this.props.id} type="text" value={this.props.data} />
</div>
);
}
}
So Input should update Form state, and Form should update Page state. I know how to do it passing a callback when the Input is written Inside Form component, but I cant figure out how to do it when it is written inside Page component, like in this case.
I have a Sandbox for those interested: https://codesandbox.io/s/qx6kqypo09
class Input extends Component {
constructor(props) {
super(props);
}
handleChange(e) {
let data = this.props.this.state.data;
data.text1 = e.target.value;
this.props.this.setState({ data: data });
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component {this.props.id}</div>
<input
id={this.props.id}
type="text"
value={this.props.data}
onChange={e => this.handleChange(e)}
/>
</div>
);
}
}
use your input component as specified and your page component as mentioned below-
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input id="text1" this={this} data={this.state.data.text1} />
<Input id="text2" data={this.state.data.text2} />
</Form>
</div>
);
}
}
I think this will help you
Thanks
As #dashton said, I am holding the same state in different components, and that's not correct. I will look for a different approach instead using only Form component state, and sharing logic via composition. I will open a new question for this.
without using some kind of state management, you would need to create a method that handles the state change in the parent component that you would then pass down to your child component a a prop.
Once you call that method in the child component it will update the state of the parent component.
This is one way of doing what you want to achieve: passing a callback handler for onChange. But, when your app starts to get bigger things can be ugly :) If you are thinking about creating a complex reusable Form component maybe you can examine the present node packages.
An alternative to this method, if you need a simple one, you can study React Context a little bit. It can help you maybe. Other than that Redux or other global state management libraries can do this also.
class Page extends React.Component {
state = {
data: {
text1: "Initial text1",
text2: "Initial text2",
},
};
handleChange = ( e ) => {
const { name, value } = e.target;
this.setState( prevState => ( {
data: { ...prevState.data, [ name ]: value },
} ) );
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input name="text1" data={this.state.data.text1} onChange={this.handleChange} />
<Input name="text2" data={this.state.data.text2} onChange={this.handleChange} />
</Form>
</div>
);
}
}
const Form = props => (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{props.data.text1}</div>
<div>{props.data.text2}</div>
</div>
{props.children}
</div>
);
const Input = props => (
<div className="Child" id={props.id}>
<div>Input component {props.id}</div>
<input name={props.name} type="text" value={props.data} onChange={props.onChange} />
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<Page />, rootElement);
.Page {
border: 10px solid blue;
}
.Parent {
border: 10px solid turquoise;
}
.Child {
border: 3px solid tomato;
}
.DataPreview {
border: 3px solid lightgray;
}
<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="root"></div>
As other people have said, you are holding the same state in different components, which obviously isn't correct.
However, to answer your requirement regarding decoupling child components from the form, you could make your form handle state changes from the inputs by using a render prop which would pass a callback to the inputs, see code and link.
https://codesandbox.io/s/4zyvjm0q64
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class Input extends Component {
constructor(props) {
super(props);
}
handleChange(id, value) {
this.props.onChange(id, value);
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component {this.props.id}</div>
<input
id={this.props.id}
type="text"
value={this.props.data}
onChange={e => this.handleChange(e)}
/>
</div>
);
}
}
class Form extends Component {
constructor(props) {
super(props);
this.state = this.props.data;
}
handleChange = (id, value) => {
this.setState({ [id]: value });
};
render() {
return (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{this.state.text1}</div>
<div>{this.state.text2}</div>
</div>
{this.props.render(this.handleChange)}
</div>
);
}
}
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form
data={this.state.data}
render={(handler) => {
return (
<div>
<Input id="text1" onChange={e => handler("text1", e.target.value)} />
<Input id="text2" onChange={e => handler("text2", e.target.value)} />
</div>
);
}}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Page />, rootElement);
I have a simple component that displays data onClick event on a button. Here is my component:
import React, { Component } from 'react';
import './cardCheck.css';
class CardCheck extends Component {
constructor(props) {
super(props);
this.state = { showMessage: false };
}
_showMessage = bool => {
this.setState({
showMessage: bool
});
};
render() {
return (
<div>
<div className="newsletter-container">
<h1>Enter the ID of your card:</h1>
<div className="center">
<input type="number" />
<input type="submit" value="Check" onClick={this._showMessage.bind(null, true)} />
</div>
<div className="results" />
{this.state.showMessage && (
<div>
hello world!
<button onClick={this._showMessage.bind(null, false)}>hide</button>
</div>
)}
</div>
<h1>Offers:</h1>
</div>
);
}
}
export default CardCheck;
The code works, but I have this error in my console:
JSX props should not use .bind()
I read about it and changed my function to arrow ones like this:
import React, { Component } from 'react';
import './cardCheck.css';
class CardCheck extends Component {
constructor(props) {
super(props);
this.state = { showMessage: false };
}
_showMessage = bool => () => {
this.setState({
showMessage: bool
});
};
render() {
return (
<div>
<div className="newsletter-container">
<h1>Enter the ID of your card:</h1>
<div className="center">
<input type="number" />
<input type="submit" value="Check" onClick={this._showMessage()} />
</div>
<div className="results" />
{this.state.showMessage && (
<div>
hello world!
<button onClick={this._showMessage()}>hide</button>
</div>
)}
</div>
<h1>Offers:</h1>
</div>
);
}
}
export default CardCheck;
The error is gone, but my code does not work now. What is the correct way to do this with arrow functions and still make it work?
Either binding or using arrow function is not suggested since those functions will be recreated in every render. This is why you see those warnings. Instead of binding or invoking with an arrow function use it with reference and change your function a little bit.
_showMessage = () =>
this.setState( prevState => ( {
showMessage: !prevState.showMessage,
}) );
Instead of using a boolean, we are changing showMessage value by using its previous value. Here, we are using setState with a function to use previous state since setState itself is asynchronous.
And in your element you will use this function with its reference.
<input type="submit" value="Check" onClick={this._showMessage} />
Working example.
class CardCheck extends React.Component {
constructor(props) {
super(props);
this.state = { showMessage: false };
}
_showMessage = () =>
this.setState( prevState => ( {
showMessage: !prevState.showMessage,
}) );
render() {
return (
<div>
<div className="newsletter-container">
<h1>Enter the ID of your card:</h1>
<div className="center">
<input type="number" />
<input type="submit" value="Check" onClick={this._showMessage} />
</div>
<div className="results" />
{this.state.showMessage && (
<div>
hello world!
<button onClick={this._showMessage}>hide</button>
</div>
)}
</div>
<h1>Offers:</h1>
</div>
);
}
}
ReactDOM.render(
<CardCheck />,
document.getElementById("root")
);
<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="root"></div>
<input type="submit" value="Check" onClick={this._showMessage()} />
You are invoking the _showMessage function by having the () in the onClick handler. You just want to pass the reference to the function, i.e. without ()
<input type="submit" value="Check" onClick={this._showMessage} />
I am adding runnable code snippets below. see the difference
First one is React.PureComponent version
class App extends React.PureComponent {
render() {
console.log('re-render')
return (
<div>
<span>I am parent</span>
{this.props.children}
</div>
)
}
}
ReactDOM.render(
<App>
<div>
I am the child
</div>
</App>,
document.getElementById('app')
)
//setTimeout(render, 1000)
<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="app"></div>
Second one is React.Component version
class App extends React.Component {
render() {
console.log('re-render')
return (
<div>
<span>I am parent</span>
{this.props.children}
</div>
)
}
}
ReactDOM.render(
<App>
<div>
I am the child
</div>
</App>,
document.getElementById('app')
)
//setTimeout(render, 1000)
<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="app"></div>
Why the second one runs successfully, but not the first one?? I tried exploring for the reason, but didnot find any good reason
I may be wrong, but I don't think React.PureComponent exists in version 15.1.0.
The error you get ("Uncaught TypeError: Super expression must either be null or a function, not undefined") is usually triggered by a typo, or by extending a class that doesn't exist (see more details in this SO post).
My suggestion is to keep your 3rd party libs up to date and use the latest version of React in this case.
Here's your own example after the react upgrade:
class App extends React.PureComponent {
render() {
console.log('re-render')
return (
<div>
<span>I am parent</span>
{this.props.children}
</div>
)
}
}
ReactDOM.render(
<App>
<div>
I am the child
</div>
</App>,
document.getElementById('app')
)
//setTimeout(render, 1000)
<script src="https://unpkg.com/react#16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.2.0/umd/react-dom.development.js"></script>
<div id="app"></div>
React.PureComponent is added after 15.3.0 version because of which there is a error in first case.
If you want your first case to work please check the snippet. I have updated the react version.
class App extends React.PureComponent {
render() {
console.log('re-render')
return (
<div>
<span>I am parent</span>
{this.props.children}
</div>
)
}
}
ReactDOM.render(
<App>
<div>
I am the child
</div>
</App>,
document.getElementById('app')
)
//setTimeout(render, 1000)
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="app"></div>
For reference please check
react-release-version
React.PureComponent will not work in your case because you are using a older version of ReactJS. Actually the support for React.PureComponent was introduced with React 15.3 on June 29, 2016.
What is the standard way of showing a loader icon before browser downloads all js files and loads react application.
Can I do something like this without breaking anything?
<div id="content" class="app">
Loading...
</div>
Yes.
Once your javascript has loaded, you can replace Loading... by rendering your react app into the same <div>
render(
<App />,
document.getElementById('content')
);
One way of doing this using component life cycle methods.
class App extends React.Component {
constructor(props){
super(props);
this.state = {
loading: true
};
}
componentWillMount(){
this.setState({loading: true}); //optional
}
componentDidMount(){
this.setState({loading: false})
}
render() {
return (
<section className="content">
{this.state.loading && 'loading...'} {/*You can also use custom loader icon*/}
<p>Your content comes here</p>
{this.props.children}
</section>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<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="app">
</div>