Develop Reference

Linking Image Issue

I am trying to link my picture but it's not working
Any idea what I have forgotten?
Code:
import React, { Component } from 'react';
export default class Card extends Component {
render() {
return (
<div>
<img src="../img/img_avatar.png" alt="Card"></img>
</div>
);
}
}
[Structure][1]

Images are self-closing tags, so you would use it like:
<img src="../img/img_avatar.png" alt="Card" />
instead of what you're using.

'Component' is not defined react/jsx-no-undef

I created one component and I'm exporting it
import React , {Component} from 'react'
import logo from './logo.svg';
class Item extends Component {
render () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">ReactND - Coding Practice</h1>
</header>
<h2>Shopping List</h2>
<form onSubmit={this.addItem}>
<input
type="text"
placeholder="Enter New Item"
value={this.state.value}
onChange={this.handleChange}
/>
<button disabled={this.inputIsEmpty()}>Add</button>
</form>
<button onClick={this.deleteLastItem} disabled={this.noItemsFound()}>
Delete Last Item
</button>
</div>
)
}
}
export default Item
And I want to use this component in my app component as below
import React from 'react';
import './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
But I got this error in App.js
Line 9: 'Item' is not defined react/jsx-no-undef
pretty sure I did everything. I have exported and imported this component , so what I'm missing here?

You have to name your import.
import React from 'react';
import Item from './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;

Cannot read property 'suppressHydrationWarning' of null

I'm a react beginner, currently learning NextJS.
I've created a simple component in CreateSubject.js:
import React from 'react';
export default function CreateSubject(props) {
return (
<div>
<div className="field">
<label className="label">Name</label>
<div className="control">
<input
ref="input"
className="input"
type="text"
/>
</div>
</div>
<div className="field is-grouped is-grouped-right">
<p className="control">
<a
className="button is-primary"
onClick={props.onClick}
>
Validate
</a>
</p>
<p className="control">
<a className="button is-light">
Cancel
</a>
</p>
</div>
</div>
)
};
This code is NOT working, I got the following error:
Uncaught TypeError: Cannot read property 'suppressHydrationWarning' of null
If I change this function into a Component:
import React from 'react';
export default class CreateSubject extends React.Component {
render() {
return (
<div>
<div className="field">
...
it's working well. What is wrong with the first code?
For more information, I'm using NextJS, and CreateSubject is called like that:
import React from 'react';
import Navbar from './Navbar';
import Modal from './Modal';
import CreateSubject from './forms/CreateSubject';
let displayShowModal = false;
const createSubject = () => {
alert('okkkk')
};
export default () => (
<div>
<Modal display={displayShowModal} title="Creating subject">
<CreateSubject onClick={createSubject}/>
</Modal>
<Navbar/>
</div>
);

The issue was due to the input field having a ref attribute. Removing the ref attribute that wasn't that useful anyway fixed the issue.

The problem was that you used a functional component and we should use useRef for it: https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components. Also, be cautious when you pass ref attribute to your element. Often people pass name of the ref as a string instead of using {}.
In your case it should be:
import React, {useRef} from 'react';
export default function CreateSubject(props) {
const anyName = useRef(null);
...
<input
ref={anyName} // not ref="anyName"
className="input"
type="text"
/>
...
}

Remove the ref attribute in the input tag. If you really need to use it, use useRef as an {object}, not as a "String".
I ran into the same issue today at work!

onClick not invoked when clicking on sidebar

In my main container the layout has this code
import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';
class Layout extends Component {
state = {
showSideBar: true
}
sideBarToggleHandler = () => {
console.log("test");
}
render() {
return (
<div>
<Header />
<div>
<SideBar onClick={this.sideBarToggleHandler}/>
<main id="main">
{this.props.children}
</main>
</div>
</div>
)
}
}
export default Layout;
Whenever I click on any element in the side bar I want to console log test
For some reason this is not happening however if I move the onClick method to the header for example or to main it works fine
This is my sidebar:
import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {
}
return (
<div className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
};
export default sideBar;
and this is my navigation items:
import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faHome } from '#fortawesome/free-solid-svg-icons';
import { faFileAlt } from '#fortawesome/free-solid-svg-icons';
import { faChartLine } from '#fortawesome/free-solid-svg-icons';
library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);
const navigationItems = (props) => {
return (
<Aux>
<p>CONSUMER</p>
<ul className={classes.NavigationItems}>
<li><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</li>
<li><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</li>
<li><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</li>
</ul>
<div className={classes.Divider}></div>
<div className={classes.ButtonPosition}>
<button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
</div>
<div className={classes.Divider + ' ' + classes.DividerBottom}></div>
<p className={classes.footer}>Micheal Alfa v 1.0.0</p>
<p className={classes.footer}>Copyrights # 2019 All Rights Reserved</p>
</Aux>
);
};
export default navigationItems;
Any ideas?
Thank you

You are not doing anything with the passed onClick event. You need to put it on something, like so:
const sideBar = (props) => (
<div onClick={this.props.onClick} className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
export default sideBar;
This will fire that event when you click on the div. Make sense?

React Component is blank in the webpage

I created a Reactjs app by create-react-app.
... but the components are not shown in the page, I think it is probably because App.js is not rendering the components?
Here is my code:
App.js
import React, { Component } from 'react';
import './App.css';
import login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<login/>
</div>
);
}
}
export default App;
/containers/login/login.js
import React, { Component } from 'react';
import "./login.css";
class login extends Component {
render() {
return (
<div className="headings">
<form action="">
Username <br/>
<input type="text" name="userrname" />
<br/>
Password <br/>
<input type="password" name="password" />
<br/>
<input type="submit" value="Login" />
</form>
</div>
);
}
}
export default login;
The component in the browser is like this:
<login></login>

Your own component need to start with a capital letter, or Babel will treat them as strings.
Rename the variable to Login and it will work.
import Login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<Login />
</div>
);
}
}