Develop Reference

Can't render my component, Expected an assignment or function call and instead saw an expression in React

I written my code following a udemy course. I'm unable to render the Layout component's content is there anything I missed or any syntax mistakes that needs to be corrected to sort this out ?
const Aux = (props) => {props.children}
export default Aux;
import React,{Component} from 'react'
import Layout from './components/Layout/Layout';
class App extends Component
{
render() {
return (
<div>
<Layout>
<p>Hai.. Is this working ? </p>
</Layout>
</div>
);
}
}
export default App;
import React from 'react';
import Aux from '../../hoc/Auxx';
const layout = (props) =>(
<Aux>
<div>Toolbar,Sidebar,Backdrop</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;

You problem is that Aux is a blank component.
When you use the syntax const Aux = (props) => {props.children} you actually return nothing!
You see, javascript thinks that { } is the function itself and not return your props.children. Just remove the brackets:
const Aux = (props) => props.children;

I've modified your code as below:
const Aux = (props) => props.children // removed the {} so that it can return the children
export default Aux;
import React,{Component} from 'react'
import Layout from './components/Layout/Layout';
class App extends Component
{
render() {
return (
<div>
<Layout>
<p>Hai.. Is this working ? </p>
</Layout>
</div>
);
}
}
export default App;
import React from 'react';
import Aux from '../../hoc/Auxx';
const Layout = (props) =>( //changed the layout to Layout: it needs to be capitalized
<Aux>
<div>Toolbar,Sidebar,Backdrop</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;

How can I do to hide my div using react with components?

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.

The Data Flows Down in React.js

Hi Im just learning react
I've small problem
I want to learn how to pass state data to its Child as props
Here's me code
App.js
import React from "react";
import Clock from "./Clock";
import Test from "./Test";
import "./App.css";
function App() {
return (
<div className="App">
<Clock />,
<Test />
</div>
);
}
export default App;
Clock.js
import React from "react";
import Test from "./Test";
class Clock extends React.Component {
state = {
date: new Date(),
};
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date(),
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
<h3> Time Now</h3>
<Test date={this.state.date} />
</div>
);
}
}
export default Clock;
Here's the Child component I want to pass the state I named it test
import React, { Component } from "react";
export class Test extends Component {
render() {
return (
<div>
<p>{this.props.date.toLocaleTimeString()}</p>
</div>
);
}
}
export default Test;
I got this error >>
TypeError: Cannot read property 'toLocaleTimeString' of undefined
date undefined although I gave its parent props
Please I need help
thanks in advanced

I guess you are seeing the error because of Test Instance used in App.js. You are not passing in data over there. Removing it from there may get rid of error.
App.js
import Clock from "./Clock";
import "./App.css";
function App() {
return (
<div className="App">
<Clock />
</div>
);
}
export default App;

You've passed props perfectly in Clock.js however in App.js you are not passing date as a prop to <Test /> which is why you're getting the above error.

How do I change the innerHTML of an element using React?

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;

React componet should be written as a pure function

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;