Content.js file
import React from 'react';
const Content = () => {
console.log('content called');
return (<div>Content</div>);
};
export default Content;
App.js file
import React from 'react';
import Content from './Content';
const App = () => {
const isUserAuthenticated = false;
return (
<div>
{
isUserAuthenticated
? <Content/>
: <></>
}
</div>
);
}
export default App;
Even though the condition is false, Content component gets loaded and console.log is executed.
Is it because I have imported the file ?
I do not see the HTML added to the DOM though.
Can you try this on your App.js :-
import React from 'react';
import Content from './Content';
const App = () => {
const isUserAuthenticated = false;
return (
<div>
{isUserAuthenticated && <Content/>}
</div>
);
}
export default App;
I would also go ahead and say you are using it somewhere else, and you haven't noticed. Look through your code!
I put up this sandbox real quick to check it for myself, and the conditional rendering works as expected.
Check if out if you'd like.
Related
React JS code:
I want the src/app.jsx to do export default App when the REACT_APP_AUTH_SERVER variable in .env does not exist or have other value, and do export default withAuthenticator(App) when the REACT_APP_AUTH_SERVER variable in .env does exist, and has value aws-cognito:
src/app.jsx:
import React, { Component } from 'react';
import SecuredGate from './SecuredGate/SecuredGate';
import { withAuthenticator } from '#aws-amplify/ui-react'
import './App.css';
import '../fontStyles.css';
class App extends Component {
render() {
return (
<div>
<SecuredGate />
</div>
);
}
}
const Result = () => {
if (process.env.REACT_APP_AUTH_SERVER && process.env.REACT_APP_AUTH_SERVER === "aws-cognito"){
return withAuthenticator(App);
}
return App;
}
// export default App;
// export default withAuthenticator(App)
export default Result;
However, this is not working.
If I do:
export default App;
// export default withAuthenticator(App)
, it works, and if I do:
// export default App;
export default withAuthenticator(App)
it works as well.
So what am I missing?
I think the problem is that the Result component returns a component instead of an element. To understand this better look at what App component does when called with <App />. It runs the code in its body and returns some markup. But what happens if you call <Result />. It will run the code in its block and return another component (a function). So to solve this you can try:
const Result = (process.env.REACT_APP_AUTH_SERVER && process.env.REACT_APP_AUTH_SERVER === "aws-cognito")
? withAuthenticator(App)
: App;
}
export default Result;
I am new to Hooks and would like to understand better how to do things the right way. I am trying to separate my component into a Home and SignIn. Simple example:
Home.js
import {SignIn} from './SignIn';
export const Home = () => {
return (
<div>
<SignIn />
</div>
)
}
SignIn.js
export const SignIn = () => {
//sign in functionality
return (
//sign in forms
)
}
with this format it works but on the console I'm having error:
Functions are not valid as a React child. This may happen if you return a Component instead of
<Component /> from render. Or maybe you meant to call this function rather than return it.
in SignIn (at Home.js:26)
What would be the correct way of exporting Hooks to be a valid react child?
if u do that. u'll got this "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it."
const method = () => {}
...
return (
<div>
{method}
</div>
);
changed
const method = () => {}
...
return (
<div>
{method()}
</div>
);
in your SignIn.js
export const SignIn = () => {
return (
// the problem is here
// do like that {method()}
);
};
============UPDATE==============
SignIn.js
import React from 'react'
export const SignIn = () => {
return <div>SignIn</div>
}
Home.js
import React from 'react';
import {SignIn} from './SignIn';
export const Home = () => {
return (
<div>
<SignIn />
</div>
)
}
You have to make React recognize that it is a component by doing so
In your SignIn.js and your Home.js:
import React from "react";
Updated, try this:
export const SignIn = () => {
return <div>SignIN</div>;
};
export const Home = () => {
return <SignIn />;
};
on my freshly installed app i try to import my components like this:
import {Cards , Chart , CountryPicker} from '../components'
and i made an index.js directory:
export {default as Cards} from './Cards/Cards'
export {default as Chart} from './Chart/Chart'
export {default as CountryPicker} from './CountryPicker/CountryPicker'
but it return error :Uncaught SyntaxError: Unexpected token 'export'.
i am doing this trying to copy a tutorial and it looks like it works for the tutor but not me!
This is the basic format for Reactjs.
for more you can Basic example here
//Card
import React from 'react';
const Card = (props) => {
return (
// JSX code
)
}
export default Card;
//Chart
import React from 'react';
const Chart = (props) => {
return (
// JSX code
)
}
export default Chart;
//CountryPicker
import React from 'react';
const CountryPicker = (props) => {
return (
// JSX code
)
}
export default CountryPicker;
//index.JSX
import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';
I think you should first define the components individually and each component should be exported at the bottom of the definition page like so...
import React from "react"
const Cards = () => {
//Helper functions here
return (
//Jsx here
)
}
export default Cards
And then you can now import this component in your App.js component based on the relative path like so...
import Cards from "./components/Cards/Cards";
This is assuming Cards is 2 folders deep from your home directory.
the problem was that i have not put my component folder inside the src folder. hence webpack did nothing about it and it was interpreted as a raw js file which resulted in the error. moving it to the src folder did the trick!
i need to integrate my react application using google analytics. I found the react-ga library which looks reliable and "easy" to use. But i didn't use google analytics in the past and i'm having some dificulties. First of all i use the withTracker component i the demo page of react-ga github project and then in my router i wrap my homepage component with this wrapper. I need to make a pretty simple task but i can't find how. I need to track the number of visitors that hit the homepage. The withTracker component is this:
import React, { Component } from 'react';
import ReactGA from 'react-ga';
const withTracker = (WrappedComponent, options = {}) => {
const trackPage = (page) => {
ReactGA.set({
page,
options
});
ReactGA.pageview(page);
};
class HOC extends Component {
componentDidMount() {
const page = this.props.location.pathname;
trackPage(page);
}
componentWillReceiveProps(nextProps) {
const currentPage = this.props.location.pathname;
const nextPage = nextProps.location.pathname;
if (currentPage !== nextPage) {
trackPage(nextPage);
}
}
render() {
return <WrappedComponent {...this.props} />;
}
}
return HOC;
};
export default withTracker;
and my homePage is this:
import React, { PropTypes } from 'react';
import Footer from './header/footer';
const Main= props => (
<div>
<Footer/>
</div>
);
export default MainExperienceComponent;
Can you help me deal with this issue? Thanks a lot
While learning react JS from official documentation page, everything is working fine so far, now when I tried to export one method from another page in another page as below ( file name on top of each snippet)
src/Greeting.js
function UserGreeting() {
return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedin;
if(isLoggedIn) {
return <UserGreeting />;
} else {
return <GuestGreeting />;
}
}
export default Greeting;
src/LoginControl.js
import React from 'react';
import Greeting from 'Greeting';
function LoginButton(props) {
return <button onClick={props.onClick}>Login</button>;
}
function LogoutButton(props) {
return <button onClick={props.onClick}>Logout</button>;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false})
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if(isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
export default LoginControl;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LoginControl from './LoginControl';
ReactDOM.render(
<LoginControl />,
document.getElementById('login')
);
ReactDOM.render(<App />, document.getElementById('root'));
public/index.html
<body>
<div id="root"></div>
<div id="login"></div>
</body>
but it gives below error in the browser?
./src/LoginControl.js Module not found: Can't resolve 'Greeting' in '/opt/rqt/src'
Why am I getting this error?
Do I need to create a class in Greeting.js instead of direct export a function?
You are getting that error because you are importing the module incorrectly.
If you do:
import Greeting from 'Greeting';
Your compiler will look for the file in node_modules (and possibly other directories, depending on your configuration).
Since it's in the same directory, you have to import it as:
import Greeting from './Greeting';
Basically ./ means that the file exists at the current working directory.
Another Possible Solution
FWIW I had this issue when I was importing from a single library using different import syntax approaches on more than one line in my script.
Why did this happen to me?
This problem happened because I would import like this by hand:
import { Stuff, Things } from 'some-library', then as I was coding, VS Code would automatically bring in new imports. So, I'd end up with this in my script:
import { Stuff, Things } from 'some-library'
...
import Code from 'some-library/Code'
For some reason, when this occurs, this error would get thrown.
Tech Stack
Next.js
Material UI