Develop Reference

Why I can't scroll a div into view?

So I have a sidebar, and when I click on one of the items, it should scroll to div with a certain name. It worked before, but I decided to add 'active' class to the item clicked to change its color, and it stopped scrolling to divs.
Sidebar.jsx file:
import React, { useState} from 'react';
import './Sidebar.scss';
import { SlidebarData } from "./SlidebarData";
import spike from '../../assets/spike_pic.jpg';
const Sidebar = () => {
const [sideBar, setSidebar] = useState(false);
const [selectedLink, setSelectedLink] = useState("");
return (
<div className="sidebar">
<span className="btn" onClick={() => setSidebar(!sideBar)}>Menu</span>
<div className="profile">
<img src={spike}/>
<span>Alim Budaev</span>
<span>Available for work</span>
</div>
<ul className="sidebarlist" id={sideBar ? "hidden" : ""}>
{SlidebarData.map((val,key) =>{
return (
<li
className={`row ${selectedLink === val.link ? "active" : ""}`}
id={val.link}
key={key}
onClick={()=> {
setSelectedLink(val.link);
document.getElementById(val.link).scrollIntoView();
}}>
{""}
<div>
{val.title}
</div>
</li>
);
})}
</ul>
</div>
);
}
export default Sidebar;
As you see, I have a setState hook for selectedlink, which adds active class, but scrollIntoView doesn't work because of it, and I can't figure out why.
SidebarData.jsx, where I get links from:
export const SlidebarData = [
{
title: "Home",
link: "home"
},
{
title: "About",
link: "about"
},
{
title: "Services",
link: "services"
},
{
title: "Contact",
link: "contact"
}
]

Hi ! React issues i need assistance with event handlers

I'm trying to make a components props(sideBarInfo) details show up on the left column of a Page after clicking on a corresponding component(thumbnail) on the right column of the same Page.
Please note that all imports and exports are used in the main project(i removed them here).
I've also imported all components into the main (Page.js). Yet i keep getting a Type error for the onClick.
This is the first component - Thumbnail
class Thumbnail extends React.Component {
render(){
return (
<div className="Work" onClick={(e) => this.props.click(this.props.work)} >
<div className="image-container">
<img src={this.props.work.imageSrc} alt={this.props.work.imageSrc}/>
</div>
<div className="Work-information">
<p> {this.props.work.work}</p>
</div>
</div>
);
} }
This is the ThumbnailList
class ThumbnailList extends React.Component {
constructor(props){
super(props);
this.state= {
works: [
{
id: 0,
work: 'Work 1',
imageSrc: W1,
view: '#',
selected: false
},
{
id: 1,
work: 'Work 2',
imageSrc: W2,
view: '#',
selected: false
},
]
}
}
handleCardClick = (id,card) => {
console.log(id);
let works= [...this.state.works];
works[id].selected = works[id].selected ? false : true ;
works.forEach(work=>{
if(work.id !== id){
work.selected = false;
}
});
this.setState({
works
})
}
makeWorks = (works) => {
return works.map(work => {
return <Thumbnail work={work} click={(e => this.handleCardClick(work.id,e ))} key={work.id} />
})
}
render(){
return(
<div>
<div className="scrolling-wrapper-flexbox">
{this.makeWorks(this.state.works)}
</div>
</div>
);
}
}
This is the sidebarInfo
function SidebarInfo(props) {
return (
<img width="370" height="370" src= {props.imageSrc} />
<p> {props.work} </p>
);}
This is the problematic Page - the boldened keeps giving a Type error(cannot read property 'selected' of undefined.)
class Page extends React.Component {
render() {
return (
<span>
<div className="column left">
<div className="">
**{this.props.work.selected && <SidebarInfo imageSrc={this.props.imageSrc} /> }**
</div>
</div>
<div className="column right" >
<div>
<ThumbnailList />
</div>
</div>
</span>
)
}
}

You may need to add a check in this.props.work.selected like this this.props.work && this.props.work.selected
To ensure that this.props.work is defined before checking on this.props.work.selected

I was able to answer this for anyone interested.
there were some foundational errors in my file arrangement which have been corrected.
After refactoring, i was able to achieve what i wanted using 3 classes/functions in; App.js, Thumbnail.js and SideBarInfo.js
see one working solution with styling on this sandbox: https://codesandbox.io/s/modern-sky-y9d3c
See Solution below;
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
works: [
{
id: 0,
work: "Work 1",
imageSrc:
"https://images.unsplash.com/photo-1584608168573-b6eec7a04fd7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80",
view: "#",
selected: false
},
{
id: 1,
work: "Work 2",
imageSrc:
"https://images.unsplash.com/photo-1581665269479-57504728e479?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80",
view: "#",
selected: false
}
]
};
this.handleCardClick = this.handleCardClick.bind(this);
this.makeWorks = this.makeWorks.bind(this);
this.showWorks = this.showWorks.bind(this);
}
handleCardClick = (id, Thumbnail) => {
console.log(id);
let works = [...this.state.works];
works[id].selected = works[id].selected ? false : true;
works.forEach((work) => {
if (work.id !== id) {
work.selected = false;
}
});
this.setState({
works
});
};
makeWorks = (works) => {
return works.map((work) => {
return (
<Thumbnail
work={work}
click={(e) => this.handleCardClick(work.id, e)}
key={work.id}
/>
);
});
};
showWorks = (works) => {
let i = 0;
var w = [];
while (i < works.length) {
if (works[i].selected) {
w = works[i];
}
i++;
}
return ( <SidebarInfo imageSrc={w.imageSrc} work={w.work} /> );
};
render() {
return (
<div className="App">
<span>
<div> { this.showWorks(this.state.works)} </div>
<div className="">
<div className="scrolling-wrapper-flexbox">
{this.makeWorks(this.state.works)}
</div>
</div>
</span>
</div>
);
}
}
class Thumbnail extends React.Component {
render() {
return (
<div>
<div className="column left">
{/* this.props.work.selected && <SidebarInfo work={this.props.work.work} imageSrc={this.props.work.imageSrc}/> */}
</div>
<div className="column right">
<div className="Work" onClick={(e) => this.props.click(this.props.work)}>
<div className="image-container">
<img src={this.props.work.imageSrc} alt={this.props.work.imageSrc} />
</div>
<div className="Work-information">
<p> {this.props.work.work}</p>
</div>
</div>
</div>
</div>
);
}
}
export default Thumbnail;
function SidebarInfo(props) {
return (
<div className="one">
<div className="Work">
<h1> NAME </h1>
<div className="image-container">
<img
width="370"
height="370"
src={props.imageSrc}
alt={props.imageSrc}
/>
</div>
<p> {props.work} </p>
<p> {props.view} </p>
</div>
</div>
);
}
export default SidebarInfo;

Mapping within a map in ReactJS

I'm trying to map each value and font awesome icon to each button.
Data for each value
const test = ["440", "756", "28", "249", "345", "397", "301", "507", "648"]
Code to map over font awesome icons
const icons = [
{ id:0, name: faHeadphonesAlt, label:'Music'},
{ id:1, name: faPhone, label:'Phone'},
{ id:2, name: faHeartbeat, label:'Health'},
{ id:3, name: faShoppingBag, label: 'Shopping'},
{ id:4, name: faShieldAlt, label: 'Security'}
]
Attempted resolution
test.map(a => {
return (
<div>
<button>
{
icons.map(icon => {
return(
<FontAwesomeIcon
id={icon.id}
icon={icon.name}
/>
)
})
}
<hr />
£{a}
</button>
</div>
)
}
)
Any ideas on how I can get each icon to show up in each button whilst mapping over the array of values?

Hi if you want to show one icon for each button ordered by index see this
https://codesandbox.io/s/serene-driscoll-03s2n
you don't need to map over each icon , also you have 9 buttons and 5 icons so i make them 9 icons
so your JSX component render should return
return test.map((a, indx) => {
return (
<div>
<button>
<FontAwesomeIcon id={icons[indx].id} icon={icons[indx].name} />
<hr />£{a}
</button>
</div>
);
});
Hope that help's😘

the return needs to come first:
return <div>
{test.map(a => (
<button>
{
icons.map(icon => {
return(
<FontAwesomeIcon
id={icon.id}
icon={icon.name}
/>
)
})
}
<hr />
£{a}
</button>
)}
</div>

How to render an array of objects in React?

could you please tell me how to render a list in react js.
I do like this
https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview
class First extends React.Component {
constructor (props){
super(props);
}
render() {
const data =[{"name":"test1"},{"name":"test2"}];
const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
return (
<div>
hello
</div>
);
}
}

You can do it in two ways:
First:
render() {
const data =[{"name":"test1"},{"name":"test2"}];
const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);
return (
<div>
{listItems }
</div>
);
}
Second: Directly write the map function in the return
render() {
const data =[{"name":"test1"},{"name":"test2"}];
return (
<div>
{data.map(function(d, idx){
return (<li key={idx}>{d.name}</li>)
})}
</div>
);
}

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions
You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)}
</ul>
);
}
class First extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [{name: 'bob'}, {name: 'chris'}],
};
}
render() {
return (
<ul>
{this.state.data.map(d => <li key={d.name}>{d.name}</li>)}
</ul>
);
}
}
ReactDOM.render(
<First />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Shubham's answer explains very well. This answer is addition to it as per to avoid some pitfalls and refactoring to a more readable syntax
Pitfall : There is common misconception in rendering array of objects especially if there is an update or delete action performed on data. Use case would be like deleting an item from table row. Sometimes when row which is expected to be deleted, does not get deleted and instead other row gets deleted.
To avoid this, use key prop in root element which is looped over in JSX tree of .map(). Also adding React's Fragment will avoid adding another element in between of ul and li when rendered via calling method.
state = {
userData: [
{ id: '1', name: 'Joe', user_type: 'Developer' },
{ id: '2', name: 'Hill', user_type: 'Designer' }
]
};
deleteUser = id => {
// delete operation to remove item
};
renderItems = () => {
const data = this.state.userData;
const mapRows = data.map((item, index) => (
<Fragment key={item.id}>
<li>
{/* Passing unique value to 'key' prop, eases process for virtual DOM to remove specific element and update HTML tree */}
<span>Name : {item.name}</span>
<span>User Type: {item.user_type}</span>
<button onClick={() => this.deleteUser(item.id)}>
Delete User
</button>
</li>
</Fragment>
));
return mapRows;
};
render() {
return <ul>{this.renderItems()}</ul>;
}
Important : Decision to use which value should we pass to key prop also matters as common way is to use index parameter provided by .map().
TLDR; But there's a drawback to it and avoid it as much as possible and use any unique id from data which is being iterated such as item.id. There's a good article on this - https://medium.com/#robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Try this below code in app.js file, easy to understand
function List({}) {
var nameList = [
{ id: "01", firstname: "Rahul", lastname: "Gulati" },
{ id: "02", firstname: "Ronak", lastname: "Gupta" },
{ id: "03", firstname: "Vaishali", lastname: "Kohli" },
{ id: "04", firstname: "Peter", lastname: "Sharma" }
];
const itemList = nameList.map((item) => (
<li>
{item.firstname} {item.lastname}
</li>
));
return (
<div>
<ol style={{ listStyleType: "none" }}>{itemList}</ol>
</div>
);
}
export default function App() {
return (
<div className="App">
<List />
</div>
);
}

import React from 'react';
class RentalHome extends React.Component{
constructor(){
super();
this.state = {
rentals:[{
_id: 1,
title: "Nice Shahghouse Biryani",
city: "Hyderabad",
category: "condo",
image: "http://via.placeholder.com/350x250",
numOfRooms: 4,
shared: true,
description: "Very nice apartment in center of the city.",
dailyPrice: 43
},
{
_id: 2,
title: "Modern apartment in center",
city: "Bangalore",
category: "apartment",
image: "http://via.placeholder.com/350x250",
numOfRooms: 1,
shared: false,
description: "Very nice apartment in center of the city.",
dailyPrice: 11
},
{
_id: 3,
title: "Old house in nature",
city: "Patna",
category: "house",
image: "http://via.placeholder.com/350x250",
numOfRooms: 5,
shared: true,
description: "Very nice apartment in center of the city.",
dailyPrice: 23
}]
}
}
render(){
const {rentals} = this.state;
return(
<div className="card-list">
<div className="container">
<h1 className="page-title">Your Home All Around the World</h1>
<div className="row">
{
rentals.map((rental)=>{
return(
<div key={rental._id} className="col-md-3">
<div className="card bwm-card">
<img
className="card-img-top"
src={rental.image}
alt={rental.title} />
<div className="card-body">
<h6 className="card-subtitle mb-0 text-muted">
{rental.shared} {rental.category} {rental.city}
</h6>
<h5 className="card-title big-font">
{rental.title}
</h5>
<p className="card-text">
${rental.dailyPrice} per Night · Free Cancelation
</p>
</div>
</div>
</div>
)
})
}
</div>
</div>
</div>
)
}
}
export default RentalHome;

Try this:
class First extends React.Component {
constructor (props){
super(props);
}
render() {
const data =[{"name":"test1"},{"name":"test2"}];
const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
return (
<div>
{listItems}
</div>
);
}
}

react component iterating over data and mapping a complicated row structure

Data looks like this:
const items = [
{ image: "http://loremflickr.com/320/320/sport-car?random=1", title: "BMW 545", price: "6.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=2", title: "Mercedes GL", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=3", title: "Toyota", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=4", title: "Porsche", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=5", title: "VW Golf", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=6", title: "Infinity GS", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=7", title: "Ford GT", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=8", title: "Mitsubishi Lancer", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=9", title: "Fiat Punto", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=10", title: "Pegaout Corsa", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=11", title: "Open Corsa", price: "16.500$" },
{ image: "http://loremflickr.com/320/320/sport-car?random=12", title: "VW Passat", price: "16.500$" }
]
final structure should look like this:
<div className="Grid">
<div className="Grid-cell u-size1of2"><Card type="double"/></div>
<div className="Grid-cell u-size1of2"><Card type="double"/></div>
</div>
<div className="Grid">
<div className="Grid-cell u-size1of4"><Card/></div>
<div className="Grid-cell u-size2of4"><Card type="double"/></div>
<div className="Grid-cell u-size1of4"><Card/></div>
</div>
<div className="Grid">
<div className="Grid-cell u-size1of2"><Card type="double"/></div>
<div className="Grid-cell u-size1of2"><Card type="double"/></div>
</div>
<div className="Grid">
<div className="Grid-cell u-size1of4"><Card/></div>
<div className="Grid-cell u-size2of4"><Card type="double"/></div>
<div className="Grid-cell u-size1of4"><Card/></div>
</div>
<div className="Grid">
<div className="Grid-cell u-size1of2"><Card type="double"/></div>
<div className="Grid-cell u-size1of2"><Card type="double"/></div>
</div>
image / title / price can be passed to Card component.
I started by creating a for loop, but that thing very soon started to look like a monstrosity of if/else.
Is it possible to use map for this? or there a better library for handling this kind of templating?

This should deliver the desired DOM grid: http://codepen.io/PiotrBerebecki/pen/rrdBjX
You would now need to clean the code and apply proper styling.
class App extends React.Component {
render() {
const GridArrays = {};
items.forEach((item, index, array) => {
if (index % 5 === 0) {
GridArrays[Object.keys(GridArrays).length] = array.slice(index, index + 2);
} else if (index % 5 === 2) {
GridArrays[Object.keys(GridArrays).length] = array.slice(index, index + 3);
}
});
const renderGrids = Object.keys(GridArrays).map(key => {
if (Number(key) % 2 === 0) {
return <TwoCars cars={GridArrays[key]} />;
} else {
return <ThreeCars cars={GridArrays[key]} />;
}
});
return (
<div>
{renderGrids}
</div>
);
}
}
class TwoCars extends React.Component {
render() {
const renderTwoCars = this.props.cars.map((car, index) => {
return (
<div className="grid-cell u-size1of2">
<Card type="double" image={car.image} title={car.title} price={car.price} />
</div>
);
});
return (
<div className="grid-wrapper">
{renderTwoCars}
</div>
);
}
}
class ThreeCars extends React.Component {
render() {
const renderThreeCars = this.props.cars.map((car, index) => {
return (
<div className={index % 2 === 0 ? "grid-cell u-size1of4" : "grid-cell u-size2of4"}>
<Card image={car.image} title={car.title} price={car.price} type={index % 2 !== 0 ? 'double' : ''} />
</div>
);
});
return (
<div className="grid-wrapper">
{renderThreeCars}
</div>
);
}
}
class Card extends React.Component {
render() {
let style = this.props.type === 'double' ? 'double' : 'single';
return (
<div className={`card-${style}`}>
<div className={`image-${style}`}>
<img className={`img-${style}`} src={this.props.image} />
</div>
<div className={`desc-${style}`}>
<h4>{this.props.title}</h4>
<p>{this.props.price}</p>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);

If it were me making this application what I'd do is make three more components. A TwoCardRow component and a ThreeCardRow component and then I'd make a container component whose job it is to chop up the array you've got there into groups of two and three respectively in a loop and just pass the appropriate number of array items to those Two and Three card row components.