I want to change innerHTML of a div, when I click on the button. I don't know why, but instead of getting an error, or getting the expected result it deletes to content and replacing it with "[object Object]".
How can I get it work?
import React from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
function LoginOnClick(){
document.getElementById("wrapper").innerHTML = <SignIn />;
}
return (
<div className="container" id="wrapper">
<button onClick={LoginOnClick}>Login</button>
<Login />
</div>
);
}
export default App;
You can make use of Hooks (Added n React 16.8).
import React, {useState} from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
const [signIn, setSignIn] = useState(false);
return (
<div className="container" id="wrapper">
{signIn ? <SignIn /> : <> //This is React Fragments syntax
<button onClick={() => setSignIn(true)}>Login</button>
<Login />
</>
}
</div>
);
}
export default App;
With react you don’t have to set the innerHtml to do this, instead the more typical way is to have internal state in your component and conditionally render your SignIn component based off that. To use state the component either needs to be class or use hooks, classes are more traditional so I changed the component to be a class.
To make a class a react component you need to extend the class with the React.Component, this is because react components have lots of internal behaviours that you need to include with your class for it to be considered a component.
So
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
signIn: false,
};
this.LoginOnClick = () => {
this.setState({ signIn: true });
};
}
render() {
if (this.state.signIn) {
return (
<div className="container">
<SignIn />
</div>
);
}
return (
<div className=“container”>
<button onClick={this.LoginOnClick}>Login</button>
<Login />
</div>
);
}
}
Here is a simple way to do it:
import {useState} from "react";
const App = () => {
const [txt, setTxt] = useState("");
setTxt(<p> 'Lorem ipsum dummy text blabla.' </p>);
return(
<div>
{txt}
</div>
)
}
export default App;
Related
I have this code for the App :
import React, {Component} from 'react';
import App1 from './App1';
class App extends Component {
render(){
return (
<>
<App1/>
<div>
<h1>Hello</h1>
</div>
</>
);
}
}
export default App;
And this code is for the App1
import React, {Component} from 'react';
class App1 extends Component {
render() {
return (
<>
<button>Hide</button>
</>
);
}
}
export default App1;
I would like when I click on the Button to hide my div which displays "Hello". But I have no idea to do this ?
Could you help me please ?
Thank you very much !
You can hide the div in the parent component i.e (App.js) by using props. So here are the steps you need to follow:
create a function named as handleHide in App component, and pass it as a prop to App1 component.
Define a state named as hide in App component and pass it as a prop in App1 component.
Inside App1 component use the hide prop to change the text of button(it's bonus).
Assign handleHide function passed as prop from App to App1 component's button element's onClick .
Here are the files:
App.js
import React, { Component } from "react";
import App1 from "./App1";
class App extends Component {
state = {
hide: false
};
handleHide = () => {
this.setState({ hide: !this.state.hide });
};
render() {
return (
<>
<App1 handleHide={this.handleHide} hide={this.state.hide} />
<div>{!this.state.hide && <h1>Hello</h1>}</div>
</>
);
}
}
export default App;
And App1.js will be:
import React, { Component } from "react";
class App1 extends Component {
render() {
return (
<>
<button onClick={this.props.handleHide}>
{this.props.hide ? "Show" : "Hide"}
</button>
</>
);
}
}
export default App1;
You can see the full working code here.
Using class component is perfectly fine. You can use functional component to use react hooks it makes your code more readable and less code.
App.js
import React, { useState } from "react";
import App1 from "./App1";
export default function App() {
const [show, setShow] = useState(true);
return (
<>
<App1 setShow={setShow} show={show} />
<div>{show && <h1>Hello</h1>}</div>
</>
);
}
App1.js
import React from "react";
export default function App1({ setShow, show }) {
return (
<>
<button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"}</button>
</>
);
}
You create a state in App.js and pass those state down to App1.js, which look like this
class App extends Component {
constructor(){
super();
this.state = {
hidden: false
};
this.changeHiddenStatus = this.changeHiddenStatus.bind(this)
}
changeHiddenStatus = () => {
this.setState(state => ({
hidden: !state.hidden
}))
}
render(){
return (
<>
<App1 handleClick={this.changeHiddenStatus}/>
<div>
<h1>Hello</h1>
</div>
</>
);
}
}
And then in the App1.js you did this
class App1 extends Component {
render() {
return (
<>
<button onClick={props.handleClick}>Hide</button>
</>
);
}
}
These are some basic React stuff, so if you don't get it I suggest you should read the React doc again.
I'm trying to display a component in button click, What do I need to change in the syntax?
Anyone understand where the mistake is?
The functions works but not as I need to,
I have progressed since the previous question here display a different component with each button click
I really want to understand the right and the simple method
Thanks!
App.js
import React, {useState} from 'react';
import './App.css';
import Addroom from './components/Addroom.js'
import HomePage from './components/HomePage.js'
function App() {
const [flag, setFlag] = useState(false);
return (
<div className="App">
<h1>My Smart House</h1>
<button className="button1" onClick={()=>setFlag(!flag)}>Change Flag</button>
{flag.toString()}
<Addroom a={(!flag)}/>
<HomePage h={(flag)}/>
</div>
)
}
export default App;
HomePage.js
import React from 'react'
export default function HomePage(props) {
return (
<div>
<h2> HomePage {props.h}</h2>
</div>
)
}
Addroom.js
import React from 'react';
export default function Addroom(props) {
return (
<div>
<h2> Addroom {props.a}</h2>
</div>
)
}
With conditional operator condition ? exprIfTrue : exprIfFalse
{flag ? <Addroom /> : <HomePage /> }
If you don't need to use the flag inside components, skip passing as props
look at this sample
sample
Slightly new to react and playing around with lists, not sure why my code isn't performing as required, when I call the method it just displays plain html
Ive tried putting it between tags but nothing
Can someone point out what I'm doing wrong?
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import List from './List'
class App extends Component { //different
render() { //different
// The rest of the file is the same
return(
<div className="App">
Liste();
</div>)
};
}
function Liste(){
const names=['d','d']
return(<div>
<h2>{names[0]}</h2>
<h2> {names[1]}</h2>
</div>)
}
export default App;
Your Liste function is a functional component so it needs to be included like any other react component and not to be executed as a function. Just replace your return statement in your App component to
return(
<div className="App">
<Liste />;
</div>)
};
You can go through this link to learn the syntax - https://devhints.io/react
Try this out
const Liste = () => {
const names=['d','d']
return(
<div>
<h2>{names[0]}</h2>
<h2> {names[1]}</h2>
</div>
);
};
class App extends Component {
render() {
return(
<div className="App">
<Liste />
</div>
);
};
}
export default App;
Try this.
class App extends Component { //different
render() { //different
// The rest of the file is the same
return(
<div className="App">
{Liste()}
</div>)
};
}
function Liste(){
const names=['d','d']
return(<div>
<h2>{names[0]}</h2>
<h2> {names[1]}</h2>
</div>)
}
export default App;
I am trying to develop a webapp using reactjs and i have a issue. After more than 1 day of research, i don't understand how to do.
I want to use a component which are the main layout of my page adding other component to display in it.
In the component Base2, the child props contains another component.
import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
const Base2 = (child) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
<child/> // HERE the dynamic component
</div>
);
export default Base2;
The function calling it is :
const TestBase = ({props}) => {
return (<Base child={MyComponent}/>)
};
Moreover MyComponent can be a class declare following 2 methods:
import React from 'react';
import LoginForm from '../components/LoginForm.jsx';
class MyComponent extends React.Component{
constructor(props) {
super(props);
...
}
render() {
return (
<LoginForm
onSubmit={this.processForm}
onChange={this.changeUser}
errors={this.state.errors}
user={this.state.user}
/>
);
}
}
export default LoginPage;
Second method :
import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
const MyComponent = {
render() {
return (<Card className="container">
<CardTitle title="React Application" subtitle="Home page." />
</Card>);
}
};
export default MyComponent ;
During my tests, only the second method works. The lack of "instance" (something like that i guess) from the second method might be the issue?
How can I develop Base2 component to take these 2 types of component declaration?
Thanks in advance for your help
First pass the component like this:
<Base child={<MyComponent/>}/>
Then render it inside Base2 component by props.child, the way you wrote the Base2 component, child (just the argument name) will have the value of props not directly the component you are passing in props.
Write it like this:
const Base2 = (props) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
{props.child} //here
</div>
);
In the second method seems to be a simple json containing a render method. To create component in your second method which seems to be wrote in es5 you have to use react.createClass({ render ... })
Seek on internet you will find a lot of es5 example
With the help of #Mayank Shukla i found the best way to do.
import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
const Base2 = (props) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
{props.child}
</div>
);
export default Base2;
The function calling it is :
const TestBase = (props) => {
return (<Base2 child={<MyComponent/>}/>)
};
First Method:
import React from 'react';
import LoginForm from '../components/LoginForm.jsx';
class MyComponent extends React.Component{
constructor(props) {
super(props);
...
}
render() {
return (
<LoginForm
onSubmit={this.processForm}
onChange={this.changeUser}
errors={this.state.errors}
user={this.state.user}
/>
);
}
}
export default LoginPage;
Second method :
import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
const MyComponent = (props) =>{
return (<Card className="container">
<CardTitle title="React Application" subtitle="Home page." />
</Card>);
};
export default MyComponent ;
Here is my ReactJs component code:
import React from 'react';
class App extends React.Component {
render() {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
}
export default App;
Linting is showing me the following error:
error Component should be written as a pure function react/prefer-stateless-function
How to write that as a pure function to avoid this error ?
Like this:
import React from 'react';
const App = () => {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
export default App;
Components that do not need to keep state are called "stateless", and are usually considered best practice to use unless you need to keep state.
A simple function will suffice, you don't need an entire class (that should be only used for stateful components). You can reduce the code to
import React from 'react';
export default const App = () => (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
or
import React from 'react';
export default function App() {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
Write it like this:
import React from 'react';
var App = () => {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
export default App;
Reason is: You are not using an state or any lifecycle method in this, so you can make it as Pure Function. It is basically know as Stateless Functional Component.
Check the doc for more details.
import React from 'react';
const App = (props) => (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
export default App;