I am struggling with one idea and I need help.
I have a dropdown and dropup list and they contain the same 2 images(flags). In dropup list I select 1 flag and I want in other list to automaticlly be selected the remaining flag.
For now I have hard coded images but eventually I want to display them dynamically.
return (
<div className="container">
<div className={isClicked ? "div2" : "div1"}>
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
<div id="switch">
<button onClick={this.toggleBox}>
<img src={iconSwitch} alt="logo" />
</button>{" "}
</div>
<div className={isClicked ? "div1" : "div2"}>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
</div>
I want this to be solved in ReactJS, if anybody have some idea how to solve please let me know.
Br
C
Related
I have a code where this would essentially show links that you can press and would redirect you. I am have a problem where I am trying to click the link to "eco-news" and essentially open up a page with news articles in it. I have coded the news section, but I just dont know how to implement it.
Home > News > (directed to a new page where news would would populate)
import React from "react";
import './sidebar.css';
//import News from "../news section/News";
import { Link } from 'react-router-dom'
// Imported Images ==============>
import logo from '../../Assets/logo.png';
// Imported icons ===============>
import {IoMdSpeedometer} from 'react-icons/io';
import {TfiWorld} from 'react-icons/tfi';
import {BsQuestionCircle} from 'react-icons/bs'
// placeholder logo image
const Sidebar = () => {
return (
<div className="sideBar grid">
<div className="logoDiv flex">
<img src={logo} alt="World Space Logo" />
<h2>World Space.</h2>
</div>
<div className="menuDiv">
<h3 className="divTitle">
CONSUMPTION OVERVIEW
</h3>
<ul className="menuLists grid">
<li className="listItem">
<a href="/#" className="menuLink flex">
<IoMdSpeedometer className="icon" />
<span className="smallText">
Readout
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Driven Equivalent
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Efficiency Score
</span>
</a>
</li>
</ul>
</div>
{/* This is the tab for the Eco news, please update the necessary fonts and spacing */}
<div className="menuDiv">
<h3 className="divTitle">
NEWS
</h3>
<ul className="menuLists grid">
<li className="listItem">
{/* <a href=/News className="menuLink flex"> */}
<Link to ='\News' className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Eco-News
</span>
</Link>
{/* </a> */}
</li>
</ul>
</div>
<div className="settingsDiv">
<h3 className="divTitle">
SETTINGS
</h3>
<ul className="menuLists grid">
<li className="listItem">
<a href="/#" className="menuLink flex">
<IoMdSpeedometer className="icon" />
<span className="smallText">
Dashboard
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Consumption Overview
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Goals
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Achievements
</span>
</a>
</li>
</ul>
</div>
<div className="sideBarCard">
<BsQuestionCircle className="icon" />
<div className="cardContent">
<h3>Help Center</h3>
{/*<p>Having trouble in World Space, please contact us.</p>
<button className="btn">Go to help center</button>*/}
</div>
</div>
</div>
);
}
export default Sidebar;
<div className="menuDiv">
<h3 className="divTitle">
NEWS
</h3>
<ul className="menuLists grid">
<li className="listItem">
{/* <a href=/News className="menuLink flex"> */}
<Link to ='\News' className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Eco-News
</span>
</Link>
{/* </a> */}
</li>
</ul>
</div>
if you click the link it would lead to a broken page.
What it looks like so far
Ensure that you have followed the below steps as pre requisites
Create browser router
Add a route for your News component
Only then will your routing work
I just get started learning React, so I am sorry if I asked so basic question. I tried to solve this error message 'doesn't contain a default export(imported as 'Main') even though I write the bottom of the file export default Main. Could you check for me which part do I miss?
I will share my code below
import React, {Component} from "react";
import "./Main.css";
class Main extends Component {
render() {
return (
<div>
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search", style="font-family:Arial, FontAwesome" />
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" />
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" />
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png" />
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="../src/images/about.png" />
<span class="name"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
<img src="../src/images/ucscPic.png" />
</div>
<div class="show-box">
<div class="reaction-icons">
<i class="fa fa-comment-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-send-o"></i>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="like-counts">
<span>like 4,000</span>
<div>
<div class="check-comments">
<span>UC Santa Cruz will continue to offer most courses remotely or online for spring and summer 2021, providing in-person instruction for a small</span>
<a id="space" href="">expanding</a><br />
Check the all comments
<ul class="feed-comments">
<li>test</li>
</ul>
</div>
</div>
<div class="comment">
<i class="fa fa-smile-o"></i>
<input class="user-input" type="text" placeholder="Add Comment..." />
<button class="post">Post</button>
</div>
</div>
</div>
<div class="main-right">
<div class="top">
<img class="selfi" src="../src/images/about.png" />
<div class="main-right-name">
<span id="eng-name">JiwanJeon94</span><br />
<span id="kr-name">전지완</span>
</div>
Transform
</div>
<div class="middle">
<div class="middle-words">
<span id="recommendation">Suggestions For You</span>
view all
</div>
<div class="recommendation-people">
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
</div>
</div>
<div class="footer">
<div class="footer-top">
About
Help
press
API
Jobs
Privacy
Terms
Locations
TopAccounts
Hashtags
Language<br /><br />
</div>
<span>2021 INSTAGRAM FROM FACEBOOK</span>
</div>
</div>
);
}
}
export default Main;
I think you just need to make sure all of your html tags are closed correctly. E.g. with the .like-counts div, you are closing it with a <div> element rather than a </div>. Also make sure all of your line breaks are self closing. E.g. use <br /> rather than <br>. Opening the code in an editor like VS-code is quite helpful and will highlight some of the mistakes you've made.
I am trying to implement a smooth scroll in React, with no jquery. I have downloaded and installed react-scrollable-anchor from npm. The smooth scroll works with the first two items in my menu, and not with the last 2. See my website nav.
<div className="App">
<div>
<div className="header">
<div className="logobox">
<img className="logo" src="/eplogo.png" alt="logo"/>
</div>
<nav className="nav">
<a className="navitem" href="#projects">
<p>Projects</p>
</a>
<a className="navitem" href="#about">
<p>About</p>
</a>
<a className="navitem" href="#resume">
<p>Resume</p>
</a>
<a className="navitem" href="#contact">
<p>Contact</p>
</a>
</nav>
</div>
<header className="heading">
<a className="name" href="/">
<h1 className="App-title">Emily Pancake</h1>
</a>
<h2 className="tagline" >Web Developer and Design Enthusiast</h2>
<div className={this.state.ghost}>
<p className={this.state.typewriter}>{this.state.jokeText}</p>
</div>
<a className="arrowDown" href="#projects" rel="noopener noreferrer"><Button shape="circle" icon="down" /></a>
<ScrollableAnchor id={'projects'}>
<h2 className="sectionTitle notop">Projects</h2>
</ScrollableAnchor>
</header>
<section className="projectList">
<Projects projects={projects} key="2" />
</section>
<ScrollableAnchor id={"about"} name="about"><About key="1"/></ScrollableAnchor>
<ScrollableAnchor id={"resume"} name="resume"><Resume key="2"/></ScrollableAnchor>
<ScrollableAnchor id={"contact"} name="contact"><Footer key="1"/></ScrollableAnchor>
</div>
</div>
How can I get it to work on "resume" and "contact." The only difference is that they are functional react components instead of classes. The error seems to be related: "Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail."
I was trying to adapt this example to my angular project. Here is a Plunkr link for my own adaptation, and the important code itself here:
I have no idea what am I missing or mistyped... Any help would be appreciated since it's already a week I am facing this issue and can't figure it out.
<div id="page">
<header id="landing" class="header">
<div class="medium-4 small-centered text-center columns">
<h4 class="text-center">Expand your dimensions</h4>
<a class="">Scroll to content</a>
</div>
</header>
<div data-sticky-container id="navigation">
<div data-sticky data-margin-top='0' data-top-anchor="landing:bottom" data-btm-anchor="page:bottom">
<div class="top-bar">
<div class="top-bar-left">
<a href="#">
<img src="http://placehold.it/150x38" alt="" />
</a>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About me</li>
<li>Portfolio</li>
<li>Get in touch</li>
</ul>
</div>
</div>
</div>
</div>
<br />
</div>
Thanks in advance.
i'm trying to create a carousel that inside of it will be scrollable div with images.
The problem is that the swipe events conflict with eachother.
Plunker (the images are on slide 2)
My code:
<div class="carousel-demo">
<ul rn-carousel rn-carousel-index="carouselIndex" rn-carousel-buffered class="carousel1">
<li ng-swipe-left="left($event)">slide #1</li>
<li ng-swipe-right="right($event)">slide #2
<div class="horizontal-slide">
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
</div>
</li>
<li>slide #3</li>
</ul>
Thank's alot
Avi