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.
Related
// Warning: Cannot read properties of undefined (reading 'params')
// im try to get movie_id from movielist.js to view single movie on movie.js onclicking view review
// basically my error is from inability to pass the props into movie.js
//in nav/index.js
import { BrowserRouter as Router, Routes, Route, useParams} from "react-router-dom";
import Navbar from './navbar';
import MovieList from "../components/movie-list"
import Movie from "../components/movie"
const Nav = () => {
return (
<Router>
<Navbar/>
<Routes>
<Route exact path={'/'} element={<MovieList/>}/>
<Route path='/movies/:id/' element={<Movie props={useParams()} />} />
</Routes>
</Router>
)}
//in movielist.js
import React, {useState, useEffect} from 'react'
import MovieDataService from "../services/movie"
import { Link } from 'react-router-dom'
const MovieList = () => {
....
return (
<div>
....
<div>
{movies.map((movie)=>{
return(
<div className="card" key={movie._id}>
<div className="card-container">
<div className='card-img'>
<img src={movie.poster+"/100px180"} alt=""/>
</div>
<div className="card-body">
<h1>{movie.title}</h1>
<h2>Rating:{movie.rated}</h2>
<p>{movie.plot}</p>
<Link to={"/movies/"+movie._id}>View Review</Link>
</div>
</div>
</div>
);
})}
</div>
</div>
)
}
// in movie.js
import React, { useState, useEffect } from 'react'
import MovieDataService from '../services/movie'
import { Link } from 'react-router-dom'
const Movie = (props) => {
useEffect(()=>{
getMovie(props.match.params.id)
},[props.match.params.id]) //won't call getMovie Multiple times unless id is updated.
return (
<div>
<div className="card-container">
<div className='card-img'>
<img src={movie.poster+"/100px250"} alt=""/>
</div>
<div className="card-body">
<h1>{movie.title}</h1>
<p>{movie.plot}</p>
{props.user && <Link to={"/movies/"+props.match.params.id+"/review"}>Add Review</Link>
}
</div>
</div>
);
})}
</div>
</div>
)
}
Use useParams() hook to get url params.
const {id} = useParams()
useEffect(()=>{
getMovie(id)
},[id])
replace props.match.params.id with id everywhere
I want to route specific component in other component but when I click on the link other components are disappeared
import React from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import Sidebar from '../componants/Sidebar'
import Navbar from '../componants/Navbar';
import Router from '../Routers/Routers'
import Answer from './Answer';
import Feed from './Feed'
const Layuot = () => {
return (
<>
<div className="container-fluid">
<Navbar />
<div className="rows row">
<div className='col-3'>
<Sidebar/>
</div>
<div className="col-9 ">
<div className="content">
<Switch>
<Route path='/feed'><Feed/></Route>
<Route path = '/answer/:q_id'><Answer/></Route>
</Switch>
</div>
</div>
</div>
</div>
</>
)
}
export default Layuot;
see output
enter image description here
See Url
enter image description here
Every component are disappeared and Feed component not ms
I am trying to display the songs but for some reason my songs component is not even being executed. The console.log statement inside the Songs component is also not being logged to console. Also no errors of any sort are detected at all.
Here is my body component from which I am calling the Songs component
import './body.css'
import React from 'react'
import Header from './Header'
import { useStateValue } from './StateProvider';
import FavoriteIcon from '#material-ui/icons/Favorite';
import PlayCircleFilledIcon from '#material-ui/icons/PlayCircleFilled';
import MoreHorizIcon from '#material-ui/icons/MoreHoriz';
import Songs from './Songs.js'
function Body( {spotify}) {
const [{recently_played},dispatch] = useStateValue();
return (
<div className="body">
<Header spotify={spotify} />
<div className="body__info">
<img src={recently_played?.images[0].url} alt=""/>
<div className="body__infotext">
<strong>PLAYLIST</strong>
<h2>On Repeat</h2>
<p>{recently_played?.description}</p>
</div>
</div>
<div className="body__songs">
<div className="body__icons">
<PlayCircleFilledIcon className="body__shuffle"/>
<FavoriteIcon fontSize="large"/>
<MoreHorizIcon />
</div>
{recently_played?.tracks.items.map(item=>{
<Songs track={item.track} />
})}
</div>
</div>
)
}
export default Body
Here is the Songs component
import React from "react";
import './SongRow.css'
function Songs({ track }) {
console.log(track);
return (
<div className="songRow" >
<img className="songRow__album" src={track.album.images[0].url} alt="" />
<div className="songRow__info">
<h1>{track.name}</h1>
<p>
{track.artists.map((artist) => artist.name).join(", ")} -{" "}
{track.album.name}
</p>
</div>
</div>
);
}
export default Songs;
You are not returning anything inside the map
{recently_played?.tracks.items.map(item => {
return <Songs track={item.track} />;
})}
[or] use the shorthand version of arrow function
{recently_played?.tracks.items.map(item => <Songs track={item.track} />)}
I am creating a component where when I press the following button it changes the component and the Step is updated, but I don't know how to make that when I press the button it changes the component and returns
STEP:
import React from "react"
import { Steps } from "rsuite"
import "rsuite/dist/styles/rsuite-default.css" // or 'rsuite/dist/styles/rsuite-default.css'
import "./index.css"
export default function Registration() {
const styles = {
width: "200px",
display: "inline-table",
verticalAlign: "top",
}
return (
<div>
<Steps current={1} vertical style={styles}>
<Steps.Item title="1" />
<Steps.Item title="2" />
<Steps.Item title="3" />
<Steps.Item title="4" />
</Steps>
</div>
)
}
and this would be the component where you sent them to call
import React from "react";
import "./styles.css";
import Com1 from "./Component1";
import Com2 from "./Component2";
import Com3 from "./component3";
import Step from "./Step "
export default function App() {
return (
<div className="w-full flex">
<Step/>
<Com1/>
<Com2/>
<Com3/>
<div className="App">
<button>next</button>
<button>return</button>
</div>
</div>
);
}
each component has a next and back button
Im trying to pass simple properties from my child component to the parent component . I can't for the life of me understand why I'm getting this error. My understanding of react is that you can declare props (i.e. this.props.text) in any function or class and then pass it to the parent.
Tickerbox.js (child)
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1></h1>;
</div>
<div className="col-sm-6">
<h1>{this.props.text}</h1>;
</div>
</div>
</div>
);
}
export default Tickerbox;
App.js (parent)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Tickerbox from './TickerBox';
class App extends Component {
constructor(props) {
super(props);
this.state = {
day: 'monday',
month: 'january',
year: '1st',
};
}
render() {
return (
<div className="App">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Hi</h2>
</div>
<div className="container">
<div className="row">
<div className="col-sm-2 col-sm-push-3">day</div>
<div className="col-sm-2 col-sm-push-3">month</div>
<div className="col-sm-2 col-sm-push-3">year</div>
<Tickerbox text="test"></Tickerbox>
</div>
</div>
</div>
);
}
}
export default App;
Index.js (entry point)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Tickerbox it's a stateless component.
Stateless components are declared as function
you are trying to access to this.props.text but you already have the props in the arguments props
Instead of use this use the props passed that are the actual props for that component
Tickerbox.js
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<h1></h1>;
</div>
<div className="col-sm-6">
<h1>{props.text}</h1>;
</div>
</div>
</div>
);
}
export default Tickerbox;
Issue is we cannot access this.props.text in functional components. It should either be props.text or make it a class based component.
<h1>{props.text}</h1>;