Code
import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
const Downloads = () => {
return (
<div class="text-bg-secondary text-white p-2">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
);
};
export default Downloads;
In the Code above, it works as long as i don't add style= , the same happens everytime i add it anywhere. for example
<div>
works but
<div style="">
does not.
I tried reinstalling bootstrap. Expected: Should Show page with its contents.
Try writing your style like this :
style={{color: "red", border: "2px solid red"}} // for example
And your class= must be className=
With React, you can't write attribute as in HTML
Related
I am using NextJS and Tailwind CSS. I already built the dropdown but I have an issue building the arrow pointing to the specific element. I built the arrow in a previous version using a div rotated at 45deg but then I couldn't make my dropdown take the full screen. Now I have it full screen and I'm wondering how to make the arrow (div) point to the specific element I'm hovering on. I made sure to hide some details about the website because of confidentiality matters. Here's what I'm trying to achieve:
Here's the code I have so far:
import React from 'react'
import { navLinks } from '../data/navdata'
const DropdownHover = ({ index }) => {
return (
<div className="group-hover:block absolute left-0 w-full hidden text-dark-gray mt-8 bg-pink" aria-labelledby="dropdownButton">
<div className="justify-center">
<div className="flex py-10 px-20 text-sm justify-between">
{navLinks[index].hover.map((link, index) => {
return (
<div className="" key={index}>
<p className="text-navbar-gray py-2 uppercase font-semibold">{link.name}</p>
{link.links.map((sublink, index) => {
return(<p className="" key={index}><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href={sublink.path}>{sublink.name}</a></p>)
})}
</div>
)
})}
</div>
<div className="flex text-sm px-20 py-10">
<div className='pr-40'>
<p className="text-navbar-gray py-2 uppercase font-semibold">Dummy Data</p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
</div>
<div>
<p className="text-navbar-gray py-2 uppercase font-semibold">Dummy Data</p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
</div>
</div>
</div>
</div>
)
}
export default DropdownHover
in CSS you can simply manipulate left property of the arrow if its positioned absolute:
li :nth-child(1):hover .arrow{
left:20rem;
}
li :nth-child(2):hover .arrow{
left:30rem;
}
but if you want to make it completely responsive, first get OffsetX of every li element then add an event listener on mouseclick.
for a better understanding you can check the following project on code pen.
https://codepen.io/piyushpd139/pen/gOYvZPG
When I try to show the height and weight from an API (http://thedogapi.com/), I get an error:
TypeError: Cannot read properties of undefined (reading 'metric')
If I comment the "items.height.metric" everything works great, but I have to show these results also.
From a page before I get the ID, as I click on an item from a list, that brings me to the second page, showing something like "http://localhost:3000/config/?id=2" (So, I clicked on the second item).
GitHub: https://github.com/fvrabelo/tiroNewDogApi
Any help? love y'all
enter image description here
import {React} from 'react'
import {useEffect, useState} from 'react';
import {Link} from 'react-router-dom'
const Page = () =>{
// identifica ID na url
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
// fetch da raca baseado no ID passado pela url
const [items, setItems] = useState([])
useEffect(() => {
const getBreeds = async () =>{
const res = await fetch(
`https://api.thedogapi.com/v1/breeds/${id}`
);
const data = await res.json();
setItems(data)
}
getBreeds()
}, [])
//fetch da imagem
function getImage(imageId) {
fetch(`https://api.thedogapi.com/v1/images/${imageId}`)
.then(r =>r.json())
.then(response=> {
const data = response
document.querySelector(".image").src = data.url;
})
}
return(
<div className=""
style={{"display": "flex",
"position":"relative",
"justify-content": "center",
"align-items": "center",
'flex-direction': "column",
"maxWidth":"100%",
"maxHeight":"100%"}}>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Breed name</h6>
<h5 className="card-title text-center">{items.name}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Bred for</h6>
<h5 className="card-title text-center">{items.bred_for}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Group</h6>
<h5 className="card-title text-center">{items.breed_group}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Temperament</h6>
<h5 className="card-title text-center">{items.temperament}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Life span</h6>
<h5 className="card-title text-center">{items.life_span}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Height</h6>
<h5 className="card-title text-center">{items.height.metric}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Weight</h6>
<h5 className="card-title text-center">{items.weight.metric}</h5>
<img className ="image"
src={getImage(items.reference_image_id) }
style={{ "maxHeight": "300px", "maxWidth": "300px", "marginBottom":"15px" }}/>
<Link to="/" className="btn btn-primary">Home</Link>
</div>
);
}
export default Page;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
For now I have something like this:
enter image description here
This could be because the fields height.metric do not exist for some dogs (and for others they do).
So you have to handle that possibility:
{ items.height.metric &&
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Height</h6>
<h5 className="card-title text-center">{items.height.metric}</h5>
}
{ items.weight.metric &&
<h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Weight</h6>
<h5 className="card-title text-center">{items.weight.metric}</h5>
}
I had created some cards from an array of objects, now I want to show popup data for each card differently.
here is my code of printing
{data.carData.map( single=>(<li>{ <div onClick={handleClick}><Card single={single}/></div>} </li>))}
for this, I want the card name onClick event, but when I pass anything in the handleClick react throw an error of too many re-renders.
if I do the same onClick event inside the card component and log it prints all the cards names one by one
here is what is inside the card:
function Card({single}) {
const [flowName, setflowName] = useState();
const handleClick=(e)=>{
setflowName(e);
return
}
console.log("loging name:",flowName);
return (
<div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} >
<div className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg ">
<div className="flex justify-between">
<div className="flex flex-row align-center">
</div>
{single?.badge.map(badge=>(
<div className={"badge"} key={badge}>
<span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span>
</div>
) )}
</div>
<div className="flex justify-center">
<img src={single?.image} alt={single?.flowName} />
</div>
<div >
<div className={"mt-2 flex justify-center"}>
<h1>{single?.flowName}</h1>
</div>
</div>
</div>
</div>
) } export default Card
I suspect you're doing this when you're trying to pass a value:
single=>(<li>{ <div onClick={handleClick(value)}><Card single={single}/></div>} </li>))}
Every time this is rendered, the function is invoked straight away, which causes another render and so on...
The solution is to wrap your handleClick call in another function:
single=>(<li>{ <div onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}
I don't want to creater another table called friends at strapi and link it again to visual studio code, so I have a Characters table for all team and friends. So I want to input only new data at Characters , but filter it to know which one is friend or team. So I've tried to make a function for it to know's which is a friend, that I've determined with if you have only start date your a team if you have both start and end date you are friend. The source code at the file is this:
import Head from 'next/head'
import Layout from '../../components/Layout'
import styles from '../../styles/Home.module.css'
import fetchFromCMS from '../../lib/service';
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
export async function getStaticProps() {
const characters = await fetchFromCMS('characters');
return {
props: { characters},
revalidate: 1,
};
}
function sortByDate(a , b){
return new Date(a.StartDate) - new Date(b.StartDate);
}
function isFirend(a ){
var bool = true;
new Date(a.EndDate) != null? bool = true : bool= false;
return bool ;
}
const charactersItem = ({ characters }) => {
return (
<Layout>
<div className={styles.container}>
<Head>
<title>Characters</title>
</Head>
<main className={styles.main} id="page-top">
{/*///Team*/ }
<section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Team</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort().map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section>
{/*//friends*/}
{ <section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Friends</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort(character.EndDate).map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section> }
</main>
</div>
</Layout>
)
};
export default charactersItem;
The results aren't what I've expected because and the error it shows is this one:
I try other solutions and the only way I did something nearby the objective it duplicated, I mean with this, it duplicated the info instead of filter which one is friend.
character.endDate is not a compare function. It's possible Characters is the issue but you should isolate each issue one by one to troubleshoot.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
I'm making my web resume using react having parent div like this -
<div
className={`w-100 d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `}
>
In this I have multiple child div but when I run my code the elements of div are scrolling rather than the page.When I give height to parent div but it's not working fine on some browsers.I need a good solution so that elements remain static and page scrolls.
Thanks in advance.
https://utkarsh0911.github.io/my_web_resume/
Remove the background-attachement propery of the class 'landing_container__23Tq8' in your css.
You can try to update src/Pages/LandinPage.js with the following snippet.
import React, { Component ,Text,StyleSheet} from 'react'
import Logo from '../Images/SiteLogo/logo.jpg'
import MyNav from '../Components/MyNav'
import styles from '../css/landing.module.css'
import { Button, Container } from 'react-bootstrap'
import MyButton from '../Components/MyButton'
import Myphoto from '../Images/MyPhoto/photo.png'
import MyRoundedImage from '../Components/MyRoundedImage'
import AboutMe from './AboutMe'
import Experience from './Experience'
import Skills from './Skills'
import MySimpleImage from '../Components/MySimpleImage'
import Education from './Education'
import resume from '../docs/resume.pdf'
import MyFooter from '../Components/MyFooter'
import MyJumbo from '../Components/MyJumbo'
class LandingPage extends Component
{
render() {
return (
<div className={ `w-100 d-flex flex-column align-items-center m-0 position-absolute ${styles.container} `} >
<div className="container ">
<MyNav title="MyResume" items={["ABOUT","BLOG","CONTACT"]}/>
</div>
<div className="d-flex justify-content-center ">
<h1 className={`font-weight-bold text-white text-center ${styles.h1}`}>WELCOME TO MY STUDIO!!</h1>
</div>
<div className="d-flex flex-wrap justify-content-center mt-2 ">
<a href={resume} target="_blank" rel="noopener noreferrer" download>
<MyButton title="Download CV" variant="success"/></a>
<MyButton title="Subscribe" variant="success"/>
</div>
<div className="d-flex flex-wrap clearfix mt-1 flex-wrap justify-content-center align-items-center">
<MyRoundedImage src={Myphoto}/>
</div>
<div className="bg-white">
<AboutMe />
<MyJumbo title="EXPERIENCE"/>
<div className={styles.expContainer}>
<Experience/>
</div>
<MyJumbo title="SKILLS"/>
<Skills/>
<MyJumbo title="EDUCATION"/>
<Education/>
</div>
{/* <MyFooter/> */}
</div>
)
}
}
export default LandingPage
Basically, the scrolling is fine; however, a background is missing from the About Me section onwards.
Good Luck...