We Keep Coding

Why wont my create-react-app content center?

I used create-react-app and have been playing around with it. I understand the "app" class is supposed to center the content, and it did when I barely anything. But now it isn't doing that. Can someone tell me where I'm going wrong?
App.js
import React from "react";
import './App.css';
import { Route, BrowserRouter as Router } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
function App() {
return (
<div className="app">
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
</Router>
</div>
);
}
export default App;
about.js
import React from "react";
import { Button, Breadcrumb, Card } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css'
function About() {
return (
<div className="app">
<h1>ABOUT PAGE</h1>
<a href="/">
<img src="https://www.searchpng.com/wp-content/uploads/2019/02/Back-Arrow-Icon-PNG-715x715.png" height="50px" />
</a>
<Card className="mb-3" style={{ color: "#000"}}>
<Card.Img/>
<Card.Body>
<Card.Title>
Card Example
</Card.Title>
<Card.Text>
This is an example of react bootstrap cards
</Card.Text>
</Card.Body>
</Card>
<Breadcrumb>
<Breadcrumb.Item>Test</Breadcrumb.Item>
<Breadcrumb.Item>Test 2</Breadcrumb.Item>
<Breadcrumb.Item>Test 3</Breadcrumb.Item>
</Breadcrumb>
<Button variant="success">Test Button</Button>
</div>
)
}
export default About;

In create-react-app, there is a file App.css with class .App:
.App {
text-align: center;
}
If you'd like to use it, you will have to use capitalized name of the class, since that's how it is defined in css file.

Rendering specific Content from json

So, Hello My problem is this. I have a C-class Component that is 'maping content' that is located in data.json I will add more content later but, in C class I have a button that is currently pushing me to the Payment page, I want when the button is pressed, that it renders the content(image, price, class) only that content from json into the Payment page where I can style it once again that would be basically it. Thanks in Advance
data.json
[
{
"id":0,
"class":"A-Class",
"Info": "A is the cheapest one ",
"imgA":"./ModImages/Aclass.jpg",
"textA":"fdsd",
"trefuA":"fdsd",
"optionA":"fdsd"
},
{
"id":1,
"imgB":"./ModImages/Bclass.jpg",
"classB":"B-Class",
"priceB":"$46,400",
"textB":"fdsd",
"trefuB":"fdsd",
"optionB":"fdsd"
},
{
"id":2,
"classC":"C-Class",
"imgC":"./ModImages/Cclass.jpg",
"priceC":"$46,400",
"textC":"fdsd",
"trefuC":"fdsd",
"optionc":"fdsd"
}
]
C Class Component
import React from 'react'
import data from './data.json'
import { useHistory } from 'react-router'
function C() {
let history = useHistory();
function handleClick() {
history.push("/payment");
}
return (
<div >
{data.map((postData) =>{
console.log(postData)
return(
<div key=
{postData.id}>
<div className='absolute '>
<button onClick={handleClick}className=' absolute text-black-600 h-10 ml-24 mt-32 bg-white w-
36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>Buy Now</button>
<img className='w-screen object-contain'src={postData.imgC}></img>
<h1 className='absolute ml-24 md:text-5xl sm:text-5xl top-8'>{postData.classC}</h1>
<h1 className='text-base font-mono absolute ml-24 top-24'>{postData.priceC}</h1>
</div>
</div>
)
})
}
</div>
)
}
export default C
App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Header from './Header'
import Home from './Home'
import A from './Models/A'
import B from './Models/B'
import C from './Models/C'
import Payment from './Payment';
function App() {
return (
<div >
<div >
<Router>
<Header />
<Switch>
<Route path="/payment">
<Payment/>
</Route>
<Route path="/C">
<C/>
</Route>
<Route path="/B">
<B />
</Route>
<Route path="/A">
<A />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
</div>
</div>
);
}
export default App;
Home Component
import React from 'react'
import {
BrowserRouter as Router,
NavLink
} from "react-router-dom";
function Home() {
return (
<div className='ml-20'>
<nav className='bg-red-50 max-w-full'>
<ul >
<li>
<Link to="/A">A-Class</Link>
</li>
<li>
<Link to="/B">B-Class</Link>
</li>
<li>
<Link to="/C">C-Class</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Home

You should probably change your route to one with a parameter
<Route path="/payment/:dataId" component={Payment}></Route>
and convert the button to a Link which also passes the id
<Link
to={`/payment/${postData.id}`}
and in the Payment component
also include access to the data.json
get the url parameter from the props
use the provided parameter to find the relevant item in the data
Something like this: https://codesandbox.io/s/festive-spence-bw18s?file=/src/App.js

You can pass additional data with history.push and get it from props in Payment page.
In your C component:
import React from 'react'
import data from './data.json'
import { useHistory } from 'react-router'
function C() {
let history = useHistory();
function handleClick(postData) {
// Pass additional data to Payment component when changing route.
history.push({
pathname: '/payment',
state: {
price: postData.price,
image: postData.image,
class: postData.class
}
});
}
return (
<div >
{data.map((postData) => {
console.log(postData)
return (
<div key=
{postData.id}>
<div className='absolute '>
{/** pass postData to handleClick function */}
<button onClick={() => handleClick(postData)} className=' absolute text-black-600 h-10 ml-24 mt-32 bg-white w-
36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>Buy Now</button>
<img className='w-screen object-contain' src={postData.imgC}></img>
<h1 className='absolute ml-24 md:text-5xl sm:text-5xl top-8'>{postData.classC}</h1>
<h1 className='text-base font-mono absolute ml-24 top-24'>{postData.priceC}</h1>
</div>
</div>
)
})
}
</div>
)
}
export default C
Inside your Payment component you can pull the price, image and class out this way:
import React from 'react';
import { useLocation } from "react-router-dom";
const Payment = () => {
// ...
const location = useLocation();
console.log(location.state.image) // image url from C
console.log(location.state.class) // class from C
console.log(location.state.price) // price from C
// ...
}
export default Payment;

Can you use Material-UI Link with react-router-dom Link?

Given these two components:
import Link from '#material-ui/core/Link';
import { Link } from 'react-router-dom';
Is there a way to get the style from Material-UI with the functionality of react-router-dom?

You can use the component prop of Material-UI's Link to integrate with Link in react-router-dom. You can do the same thing with Material-UI's Button.
Here's an example showing both:
import React from "react";
import { Route } from "react-router";
import { BrowserRouter as Router, Link as RouterLink } from "react-router-dom";
import Link from "#material-ui/core/Link";
import Button from "#material-ui/core/Button";
export default function LinkRouter() {
return (
<Router>
<div>
<Link component={RouterLink} to="/">
Link to Home
</Link>
<br />
<Link component={RouterLink} to="/inner">
Link to inner page
</Link>
<br />
<Button
variant="contained"
color="primary"
component={RouterLink}
to="/inner"
>
Button to inner page
</Button>
<Route path="/" exact>
<div>Here's Home</div>
</Route>
<Route path="/inner">
<div>Here's the inner page</div>
</Route>
</div>
</Router>
);
}
Documentation: https://material-ui.com/guides/composition/#link

I have created a wrapper component to merge both Link so it is not necessary to add the component prop every time.
import { LinkProps, Link as MuiLink } from "#mui/material";
import { Link as ReactRouterLink } from "react-router-dom";
import React, { FC } from "react";
const Link: FC<LinkProps> = props => {
return (
<MuiLink {...props} component={ReactRouterLink} to={props.href ?? "#"} />
);
};
export default Link;
And you can use is as you would use the MUI/LINK:
import Link from './components/Link';
<Link href="path_to_link">LINK</Link>

React component is getting rendered twice

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest

It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.

How do I import a png image as a background for a component in React?

The earth.png image is in the same folder as the src folder, the src folder contains various components.
I have an app.js file in the main app folder which also contains the src folder.
This is the component I have in the app.js file, I tried to import the earth.png file and use it as a background for the React MDL component but it didn't work. Where am I going wrong?
import React, {Component} from 'react';
import './App.css';
import {Layout, Header, Navigation, Drawer, Content} from 'react-mdl';
import Earth from './earth.png';
import Main from './components/main';
import { Link } from 'react-router-dom';
class App extends Component {
render() {
return (
<div style={{height: '300px', position: 'relative'}}>
<Layout style={{background: 'source = {require{/earth.png}} center / cover'}}>
<Header transparent title="Continental Coders" style={{color: 'black'}}>
<Navigation>
About me
Projects
Resume
Contact
</Navigation>
</Header>
<Drawer title="Title">
<Navigation>
<Link to="/aboutme">About Us</Link>
<Link to="/projects">Projects</Link>
<Link to="/resume">Resume</Link>
<Link to="/contact">Contact</Link>
</Navigation>
</Drawer>
<Content>
<div className="page-content">
<Main/>
</div>
</Content>
</Layout>
</div>
);
}
}
export default App;

When you import the image, assuming you have the appropriate loaders, it's bringing in the file path, so you can use it like you would any other URL:
style={{ background: `url(${Earth})`}}