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;
Related
I am learning react js.
I am unable to call countrypicker component inside cards component in app.js.
Can someone please help me?
This is my cards.js
import React from 'react';
import './Cards.css';
const Cards = () => {
return(
<div class="Cards">
<p>Cards</p>
</div>
);
}
export default Cards;
this is my countrypicker.js
import React from 'react';
import './CountryPicker.css';
const CountryPicker = () => {
return(
<div class='CountryPicker'>
<p>CountryPicker</p>
</div>
);
}
export default CountryPicker;
I am calling both components from App.js
import React,{ Component } from 'react';
import Cards from './components/Cards/Cards';
import Chart from './components/Chart/Chart';
import CountryPicker from './components/CountryPicker/CountryPicker';
import './App.css';
class App extends Component {
render(){
return (
<div className='App'>
<p className='p1' style={{color:'White'}}><b><u>Covid-19 tracker app</u></b></p>
<div>
<Cards>
<div><CountryPicker title="India"/></div>
</Cards>
</div>
</div>
);
}
}
export default App;
You need to pass children as a props to Cards, like this:
const Cards = ({ children }) => {
return(
<div class="Cards">
<p>Cards</p>
{children}
</div>
);
}
Imported component to my app.js file but it is not rendering?
I built a topbar-component in another file but not able to render the topbar-component in my app.js file.
APP.js >
import React from 'react';
import './App.css';
import topbarComponent from "./topbar";
function App() {
return (
<div className="App">
{topbarComponent}
<div className="VideoGrid">
</div>
</div>
);
}
export default App;
Topbar.js>
import React from "react"
const topbarComponent = () => {
return (
<header className="top_bar">
<span><sapn>Video</sapn>Share</span>
<nav>
Home
Contact
About
</nav>
</header>
);
}
export default topbarComponent
React component names should start with an uppercase letter. your topbarComponent should then become TopbarComponent.
Topbar.js
import React from "react"
const TopbarComponent = () => {
return (
<header className="top_bar">
<span><sapn>Video</sapn>Share</span>
<nav>
Home
Contact
About
</nav>
</header>
);
}
export default TopbarComponent
Rendering a component is similar to returning html tags, where the angle brackets are used to do so. instead of {topbarComponent}, this would become
App.js
import React from 'react';
import './App.css';
import TopbarComponent from "./topbar";
function App() {
return (
<div className="App">
<TopbarComponent />
<div className="VideoGrid">
</div>
</div>
);
}
export default App;
curly braces, which you have used, are used when wanting to return a value of a variable within the jsx (react elements)
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 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;
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 ;