I'm just trying to import a png onto a navbar but I keep getting errors.
import React from "react";
import { Nav, NavLink, Bars, NavMenu } from "./navBarComponent";
import logo-light from "../logo-light.png";
const Navbar = () => {
return (
<>
<Nav>
<NavLink to="/">
<img src={"logo-light"} alt="logo" />
</NavLink>
<Bars />
<NavMenu>
<NavLink to="/ourcompany">Our Company</NavLink>
<NavLink to="/contact">Contact</NavLink>
<NavLink to="/locations">Locations</NavLink>
</NavMenu>
</Nav>
</>
);
};
export default Navbar;
in vs code the "import logo-light from" part has red error lines under it. when I hover it says 'import... =' can only be used in typescript files.
in the console it says:
I've tried moving the image to public, renaming the image, etc but nothing seems to work. what am I doing wrong?
You don't have to write the same name as the filename You can use an alias name you want and import that directly in the src like below
import logolight from "../logo-light.png";
<img src={logolight} alt="logo" />
Related
I have a JS file; Cards.js which implements a card-style div:
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div classNam="cards">
<ul className="cards__items">
<CardItem
src={require("../images/img-9.jpg").default}
text="text"
label="label"
path="/jobs"
/>
</ul>
</div>
);
}
export default Cards;
And then CardItem.js:
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<div>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap"
data-category={props.label}>
<img
src={props.src}
className="card__item__img"
alt="alt"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text} </h5>
</div>
</Link>
</li>
</div>
);
}
export default CardItem;
However, on my site, the images from CardItem are not displayed. The Text, Label and Path all work, but no image.
I've looked around and have seen different solutions to this issue but none have worked for me.
I've tried using
src="../images/img-9.jpg"
instead of using require but that also didn't work.
What's weird is I can see the path AND the preview of the image when looking at the Chrome inspection panel, but they won't load.
I've also tried putting the images folder in the Public directory which is another solution I've seen, but I get an error saying something about loading resources outside of /src
I'm making a tab bar for phone in react js and i have icons on it. I'm using React Router to perform the routes. Right now im able to change the icon color when it is active using an .active class. Is there a way I can change the Icon File when the route is active? Here is the code attached below.
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import home_icon_stroke from './home_icon_stroke.svg';
import explore_icon_stroke from './explore_icon_stroke.svg';
import activity_icon_stroke from './activity_icon_stroke.svg';
import library_icon_stroke from './library_icon_stroke.svg';
import profile_icon_stroke from './profile_icon_stroke.svg';
import './Phonetabbar.css';
export default class Phonetabbar extends Component {
render() {
return (
<div className="phone-tabbar-layout" >
<div className="fixed" >
<div className="phone-tabbar-list">
<div className="tabbar-cell">
<NavLink exact to="/" >
<img src={home_icon_stroke} ></img>
</NavLink>
</div>
<div className="tabbar-cell">
<NavLink to="/explore" >
<img src={activity_icon_stroke} ></img>
</NavLink>
</div>
</div>
</div>
</div>
)
}
}
Maybe you want to try passing the isActive function to Navlink, setting a state in it.
<NavLink exact to="/"
isActive={(match, location)=>{
if(match){
//set isActive state true
}
return match;
}
>
<img src={isActive?home_icon_stroke:anotherImg} ></img>
</NavLink>
I have a Navbar React component with a Link component which needs to scroll down to Section component when clicked. I have implemented react-scroll, however, when I click on the Link component, I get target element not found in the browser console.
The Navbar component:
import React, { Component } from "react";
import { Link, animateScroll as scroll, scroller } from "react-scroll";
class Navbar extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="section1" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
</li>
</ul>
</div>
);
}
}
export default Navbar;
And the App.js file:
import React from "react";
// Styling
import "./styles/App.css";
// Components
import Navbar from "./components/Navbar";
import SectionOne from "./components/SectionOne";
function App() {
return (
<div className="App">
<div>
<Navbar />
<SectionOne id="section1"/>
</div>
</div>
);
}
export default App;
I used this repo as a reference, however, things don't work. What have I missed here?
I have implemented a div inside of the SectionOne component
<div id="section-one-wrapper">Section One content...</div>
and then specified that id in the Link component:
<Link to="section-one-wrapper" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
and it worked.
error - React.Children.only expected to receive a single React element child.
There were quite a few questions with the same context, I tried those solutions but have not found a solution.
The Navbar of the website is what is giving me the error. There is a section over the Navbar which renders properly, when I try to render the Navbar below it throws the error.
import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'
const Homepage = () => (
<div>
<Head />
<Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
<Footer />
</div>
);
export default Homepage
The footer shows properly, head tag is for all the meta data etc(also works). Github link to all the code is-https://github.com/yohanelly/website-jsx/tree/master/components
The problem is with the whitespace between the Link and the a tag.
<Link href="#"> <a className="menu-links features">Features</a></Link>
should be either
<Link href="#"><a className="menu-links features">Features</a></Link>
or
<Link href="#">
<a className="menu-links features">Features</a>
</Link>
Read the Children in JSX section of the React docs for more info.
I get this error,
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See HeaderNavigation > NavItem > SafeAnchor > a > ... > Scrollchor > a.
With this code,
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar'
import {Nav, NavItem} from 'react-bootstrap';
import Scrollchor from 'react-scrollchor';
export default React.createClass ({
render() {
return (
<div>
<Navbar inverse fixedTop>
<Navbar.Header>
<Navbar.Brand>
M2 Consulting
</Navbar.Brand>
</Navbar.Header>
<Nav pullright bsStyle = "pills" active>
<NavItem><Scrollchor to="#services">Services</Scrollchor></NavItem>
<NavItem><Scrollchor to="#work">Latest Work</Scrollchor></NavItem>
<NavItem><Scrollchor to="#contact">Contact Us</Scrollchor></NavItem>
</Nav>
</Navbar>
</div>
);
}
});
I believe this is due to NavItem and Scrollchor both using a href,
How can I retain use of the styling of NavItem while using Scrollchor?
Appreciate the help.
NavItem has an <a> in it, so I removed it and simply used <li> instead.