react-script not returning function - javascript

So I have a react-js script that I have a core/main.js and the main app.js file.
The data in main.js won't appear in the div "welcome" in app.js - when I call the function that should fire it.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
export default function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
// highlight-next-line
ReactDOM.render(element, document.getElementById('welcome'));
}
App.js
import React from 'react';
import tick from './core/Main.js'
//import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<div id="welcome"></div>
{tick}
</header>
</div>
);
}
export default App;
How can I get this to show? I am trying to better understand this type of functions.


You should turn your function tick into a component (e.g. Tick, just to name in properly):
export default function Tick() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
}
If you do this you can then use it like any other React component:
import React from "react";
import Tick from "./core/Main.js";
//import logo from './logo.svg';
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<div id="welcome">
<Tick />
</div>
</header>
</div>
);
}
export default App;
If you want to stick to your original way of using tick as a function (e.g. if you have some special requirements) you need to actually call that function somewhere, preferably after the initial render of App, inside a useEffect:
import React from "react";
import tick from "./core/Main.js";
//import logo from './logo.svg';
import "./App.css";
function App() {
React.useEffect(() => {
tick();
}, []);
return (
<div className="App">
<header className="App-header">
<div id="welcome"></div>
</header>
</div>
);
}
export default App;

Related

How to render my home component in the app.js file?

I am trying to render my home component in the App.js like this: export function App() { return ( < Home /> ) }
but It does not display my content. Why is that?
I am not receiving any errors.

You can import and call the component like I have mentioned below,
App.js
import './App.css';
import Home from './Components/Home'
function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;

why isn't <navBar/> rendering? (react.js)

In React.js, I'm trying to render a banner with a navbar underneath it (basic stuff) but I can't figure it out.
My current navBar.js code
import React from "react";
import { ReactDOM } from "react-dom";
export function navBar() {
return (
<div>
<nav className = "nav">
<a>Upload Items</a>
<a>New Items</a>
<a>Textbooks</a>
<a>Electronics</a>
<a>Life</a>
<a>Accessories</a>
<a>others</a>
</nav>
</div>
);
}
import logo from './logo.svg';
import React, { useState } from 'react';
import './App.css';
import ReactDOM from 'react-dom';
import {navBar} from './components/navBar'
function App() {
//let [categories, setCategories] = useState(['textbooks', 'electronics', 'life', 'accessories', 'others'])
return (
<div className="App">
<header className="App-header">
<img className='logo' src={require('./revelliePicture.jpg')}/>
<h1>Aggie Market</h1>
</header>
<navBar />
</div>
);
}
export default App;
Current UI state

This is because how React (Babel) differentiate between built in DOM components and user defined components. If your component doesn't start with capital letter its assumed that its a DOM component/ element, since there is no such DOM element, it does not work as expected.
Correct your naming and you will get the intended UI.
Read the official docs here

Change :
import React from "react";
import { ReactDOM } from "react-dom";
export function navBar() {
return (
<div>
<nav className = "nav">
<a>Upload Items</a>
<a>New Items</a>
<a>Textbooks</a>
<a>Electronics</a>
<a>Life</a>
<a>Accessories</a>
<a>others</a>
</nav>
</div>
);
}
to:
import React from "react";
import { ReactDOM } from "react-dom";
export function NavBar() {
return (
<div>
<nav className = "nav">
<a>Upload Items</a>
<a>New Items</a>
<a>Textbooks</a>
<a>Electronics</a>
<a>Life</a>
<a>Accessories</a>
<a>others</a>
</nav>
</div>
);
}
React Components name must begin with a Capital Case letter.
Then use it like: <NavBar />
Reasons of this beahviour: ReactJS component names must begin with capital letters?

React js Calling Component inside component

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>
);
}

alert box is not poppomg out if linked to anchor tag?

WHY IS THIS NOT POPPING OUT AN ALERT BOX ON CLICKING THE LINK BEFORE GOING TO THE LINK????
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home.js';
function Admin() {
return (
<div className="App">
<h2>ADMIN WORK WILL BE HERE</h2>
LOGOUT
</div>
);
}
export default Admin;

import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h2>ADMIN WORK WILL BE HERE</h2>
<a href="http://localhost:3000/" onClick={() => alert('You are going to be logged out!!')}>LOGOUT</a>
</div>
);
}
export default App;

You can use an arrow function to achieve this
onclick={() => alert("You are going to be logged out!!")}

Component not rendering in react

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)

Categories

Resources