List all items in an array in ReactJS - arrays

This is the file that I'm rendering in App.js:
ProductList.js
import React from 'react'
export default function ProductList() {
var items = JSON.parse(localStorage.getItem("products")); //[foo: "4.43", bar: "3.25"]
const listitems = () => {
for( var p in items) {
<p>{p}, {items[p]}</p>
}
}
return (
<div>
{listitems}
</div>
);
}
This does not output anthing.
The question is: how do I list all the items in an array like "foo, 4.43"...?

return (
{items.map((el) => (
<p>{el}</p>
)}
)

I guess there are a few issues with this code.
First, the products you are getting from localStorage is an array, so you won't be able to get the key:value pair of it.
You would be better off transforming the products into an object, like:
{
foo: "4.43",
bar: "3.25"
}
Then, one alternative is to get the keys by doing const productKeys = Object.keys(products). Then map through them and display the values as well:
const listItems = productKeys.map(key => <p>{key}: {products[key]}</p>)
return {
<div>
{listItems}
</div>
}

Related

I am not getting data of my useState through .map function in React Js

React Js
I am trying to display data through .map which is in react state object, but I am not getting data on browser with any error, yes I now that I am not write setState in this code because i want only display my data on my browser. if this problem will be solved then I will done my setState, I Think setState is not necessary for only showing data which is in State Object.
import React from 'react';
import TinderCard from 'react-tinder-card';
function TinderCards(){
const [people, setPeople] = React.useState([
{
name: 'steve jobs',
url: 'https://cdn.britannica.com/04/171104-050-AEFE3141/Steve-Jobs-iPhone-2010.jpg'
},
{
name: 'mark zukerberg',
url: 'https://cdn.britannica.com/54/187354-050-BE0530AF/Mark-Zuckerberg.jpg'
}
]);
return (
<div>
{
people.map(person =>{
<h1>{person.name}</h1>
})
}
</div>
)
// const people = [] same thing
// BAD
// const people = [];
// people.push('sonny', 'qazi')
// GOOD (push to an array in REACT)
// setPeople([...people, 'mathan', 'lal'])
}
export default TinderCards;
You don’t return anything from map.
Change your return section to this:
return (
<div>
{people.map(person => (
<h1>{person.name}</h1>
))}
</div>
)
or if you like to keep the curly brackets syntax:
return (
<div>
{people.map(person => {
return <h1>{person.name}</h1>
})}
</div>
)

Duplicate Components with Unique Args in Storybook

Usually, when using one component, my story looks like this:
export const Template = args =>{
return (
<Dropdown {…Dropdown.args}>
)
}
Dropdown.args = {dropdownOptions: [] }
However, I'm now attempting to repeat a component with unique properties for each instance.
export const Template = args =>{
return (<div>
<Dropdown {…First.args}>
<Dropdown {…Second.args}>
</div>)
}
First.args = {dropdownOptions: [] }
Second.args = {dropdownOptions: [] }
While I'm not getting errors in my code, this does break the page. Any ideas on how to fix it?

Laravel/React - Getting an array of data from controller to react component

My case:
I am combining Laravel (laravel/ui scaffolding) and React App.
This is my first time trying this, and found myself stuck in getting data from BE to FE.
I Looks like I am getting the data, but my array of $testData is converted into a string When being logged from the Dataset of that element. I am not sure what I should do to have my array back to a json format instead.
the code:
A Controller sending my data:
public function index()
{
$testData = [
["name" => "Lucy"],
["name" => "Kurt"],
["name" => "Emma"],
];
return view('intern.index')->with('testData', $testData);
}
I have my blade, loading a div with a certain id:
#extends('layouts.app')
#section('body')
<div id="react-app" data-list={{ json_encode($testData) }} ></div>
#endsection
And my react component app.js that is rendered on the blade view:
function App( props ) {
console.log(props.list)
return (
<div className="container">
Hello World!
</div>
);
}
export default App;
if (document.getElementById('react-app')) {
const thisElement = document.getElementById('react-app');
let props = Object.assign({}, thisElement.dataset);
console.log(props)
/* The restult I am getting from that log:
{
list: "{{\"name\":\"Lucy\"},{\"name\":\"Kurt\"},{\"name\":\"Emma\"}}"
}
*/
ReactDOM.render(<App list={props.list} />, thisElement);
}
Update:
The solution was to simply parse the result back.
if (document.getElementById('react-app')) {
const thisElement = document.getElementById('react-app');
let props = Object.assign({}, thisElement.dataset);
console.log(props)
/* The restult I am getting from that log:
{
list: "{{\"name\":\"Lucy\"},{\"name\":\"Kurt\"},{\"name\":\"Emma\"}}"
}
*/
ReactDOM.render(<App list={JSON.parse(props.list)} />, thisElement);
}

can not access to my state using map in react

I have a state and I want use map to go through it,
function App() {
const [cardlayouts,setCardLayouts]=useState({id:"1",title:"title1",img:{pic1},text:"text1"})
return (
<div className="App">
{
cardlayouts.map(s=><CardLayout id={s.id} title={s.title} img={s.img} text={s.text}/>)
}
</div>
);
}
I get an error which says cardlayouts.map is not a function,any idea?
This is because you are trying map on the object. Your cardlayouts is object. You can use map only on array
Edit your code like this. To map you should have an array. But you have given a object instead.
const [cardlayouts, setCardLayouts] = useState([{id:"1",title:"title1",img:
{pic1},text:"text1"}])
.map() is an array method, but your state isn't an array.
You don't need to use map in this situation. Just access the keys like normal:
function App() {
const [cardlayouts,setCardLayouts] = useState({
id:"1",
title:"title1",
img:{pic1},
text:"text1"
})
return (
<div className="App">
<CardLayout
id={cardlayouts.id}
title={cardlayoust.title}
img={card.img}
text={s.text}
/>
</div>
);
}
Or, make the state an array and map over it like this:
function App() {
const [cardlayouts,setCardLayouts] = useState([
{
id:"1",
title:"title1",
img:{pic1},
text:"text1"
}
])
return (
<div className="App">
{cardlayouts.map(layout => (
<CardLayout
id={layout.id}
title={layout.title}
img={layout.img}
text={layout.text}
/>
))}
</div>
);
}

The second find mongo function return zero array

userKisan.find returns zero element array if I replace it with imageDatadb(just to check) this work. I dont know what I am doing wrong here, related files are imported and in other page inserting of data at userKisan runs smoothly meaning code is working and I am sure data is there.
......
import {imageDatadb} from '../api/imageData';
import {userKisan} from '../api/usersdb';
render() {
console.log('docsReadyYet',this.props.imageData);
let fileCursors = this.props.imageData;
let display = fileCursors.map((img, key) => {
console.log('aaaaa',img.kUserrId);
let kdata = userKisan.find({ }).fetch(); // if i replace userKisan with imageDatadb this works
console.log('kdata',kdata);
return <div key={key}>
<img src={img.imageData}/>
{kdata}
</div>
})
return (
<div>
<PrivateHeader title= 'All'/>
{/* <image src=""/> */}
{display}
</div>
);
}
and the tracker is
export default withTracker( ( props ) => {
const filesHandle = Meteor.subscribe('All image data');
const docsReadyYet = filesHandle.ready();
const imageData = imageDatadb.find({}).fetch();
return {
docsReadyYet,
imageData,
};
})(AllCustomers);
You need a new publish with userKisan and subscribe to that. When you try to find documents from imageDatadb they are available because you subscribed to them.

Resources