I currently have the following code:
const Suggestions = ({ suggestions }) => {
return (
suggestions.map((suggestion, i) => <p key={i}>{suggestion}</p>)
)
}
But I somehow want to be able to render all of the p tags inside a div. So, my final code after the mapping would look something like:
<div className="suggestions">
<p>suggestion1</p>
<p>suggestion2</p>
...
</div>
So I tried something like this:
const Suggestions = ({ suggestions }) => {
return (
<div className="suggestions">
suggestions.map((suggestion, i) => <p key={i}>{suggestion}</p>)
</div>
)
}
But this says suggestions and i isn't defined. Why am I not able to access the prop inside my div element?
You need to wrap your map with curly braces:
const Suggestions = ({ suggestions }) => {
return (
<div className="suggestions">
{suggestions.map((suggestion, i) => <p key={i}>{suggestion}</p>)}
</div>
)
}
import React from 'react';
export const Suggestions = ({ suggestions }) => {
return (
<div className="suggestions">
{suggestions && suggestions.map((item, i) => (<p key={i}> {item} </p>))}
</div>
)
}
export const App = () => {
const list = ['test1', 'test2','test3'];
return (
<div className='App'>
<h1>Hello React.</h1>
<Suggestions suggestions={list} />
</div>
);
}
Related
I have the following React component:
import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
function Pokemon({ name, url }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((r) => r.json())
.then(setData);
}, [url]);
const onClickButtonChange = () => {
let cardMore = document.querySelector(".card_more");
let cardMain = document.querySelector(".card_main");
cardMore.style.display = "block";
cardMain.style.display = "none";
};
return (
<div>
{data ? (
<div>
<div className="card card_main">
<div className="animate__animated animate__bounceInUp">
<div className="card-image">
<img src={data.sprites.front_default} alt="pokemon_img" />
<span className="card-title">{name}</span>
<button onClick={onClickButtonChange}>More</button>
</div>
<div className="card-content">
{data.abilities.map((n, index) => (
<p key={index}>{n.ability.name}</p>
))}
</div>
</div>
</div>
<div className="card card_more">
<p>{data.height}</p>
<p>{data.weight}</p>
</div>
</div>
) : (
<div>
<TailSpin type="Puff" color="purple" height={100} width={100} />
</div>
)}
</div>
);
}
export { Pokemon };
My implementation of the More button needs to display additional features (the card_more block). Right now this function only works on the very first element. I understand that in React this can most likely be done more correctly, but I don’t know how, so I use CSS styles.
P.S Edited:
I tried to use React features, maybe someone can tell me or does it make sense?
import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
function Pokemon({ name, url }) {
const [data, setData] = useState(null);
const [show, setShow] = useState(false);
useEffect(() => {
fetch(url)
.then((r) => r.json())
.then(setData);
}, [url]);
const handleMore = async () => {
if (show === true) {
setShow(false);
} else if (show === false || !data) {
const r = await fetch(url);
const newData = await r.json();
setData(newData);
setShow(true);
}
};
return (
<div>
{data && show ? (
<div>
<div className="card card_main">
<div className="animate__animated animate__bounceInUp">
<div className="card-image">
<img src={data.sprites.front_default} alt="pokemon_img" />
<span className="card-title">{name}</span>
</div>
<div className="card-content">
{data.abilities.map((n, index) => (
<p key={index}>{n.ability.name}</p>
))}
</div>
</div>
<button onClick={handleMore}>More</button>
</div>
<div className="card card_more">
<p>{data.height}</p>
<p>{data.weight}</p>
</div>
</div>
) : (
<div>
<TailSpin type="Puff" color="purple" height={100} width={100} />
</div>
)}
</div>
);
}
export { Pokemon };
Youre right, this isn't the way you should do it in React. But your problem in your onClickButtonChange-Function is that youre only getting one element with document.querySelector(".card_more") and everytime you call it you get the same element back (No matter on which card you call it)
What you need to do is: Identify the single component elements. Thats most likely solved by passing a id/key value down via props and then putting this id on a parent-element (e.g. div.card) and you give it an id:
<div className="card card_main" id={props.keyvalue}>
....
</div>
And then in your onClickButtonChange-Function you call:
let cardMore = document.querySelector(`#${props.keyvalue} .card_more`);
...
This should give you the right element.
so the problem is I have a search functionality everything works, except that when an item has not been found, you see it should display the text "champion has not been found" but it is not. I would appreciate the help Where am I making a mistake?
import data from './data.json'
import './Champions.css'
import Skills from './Skills'
import CloseIcon from '#material-ui/icons/Close';
const Champions = ({searchValue}) => {
const [toggleShow, setToggleShow] = useState(false);
const [currentSelectedChampion, setCurrentSelectedChampion] = useState({});
const handleSelectChampion = (id) => {
if (!toggleShow) setToggleShow(true);
const currentChampion = data.filter((champ) => champ.id === id)[0];
setCurrentSelectedChampion(currentChampion);
};
function filterChampions(champion) {
return champion.name.toLowerCase().includes(searchValue.toLowerCase());
}
{data.filter(filterChampions).length === 0 && (<div className='not__found'>
<h1>No champion has been found</h1>
</div>)}
return (
<div className="champions">
{data.filter(filterChampions).map((champion) => {
return (
<div key={champion.id} onClick={() => handleSelectChampion(champion.id) } >
<div className="champion">
<img className="champion__Image" src={champion.image}></img>
<h4 className="champion__Name">{champion.name}</h4>
{toggleShow && currentSelectedChampion.id === champion.id && (
<>
<Skills currentChampion={currentSelectedChampion} />
<CloseIcon onClick={() => setToggleShow(false)}/>
</>
)}
</div>
</div>
);
})}
</div>
);
};
export default Champions
The map in line {data.filter(filterChampions).map((champion) => { will not return anything for empty array.
Consider the following examples.
[].map(e => 'called'); // []
[3].map(e => 'called'); // ['called']
So if {data.filter(filterChampions) returns an empty array the map will return empty array and not the div with class not__found.
What you need to do is something as following
const showChamtions = () => {
// Put the filtered data in a variable
const selectedChampions = champions.filter((element) => element.score > 12);
// If data is there do what you intend to do with it else not_found div
if (selectedChampions && selectedChampions.length > 0) {
return selectedChampions.map((element) => <p>{element.name}</p>);
} else {
return (
<div className="not__found">
<h1>No champion has been found</h1>
</div>
);
}
};
Example - https://codesandbox.io/s/map-on-empty-array-i6m1l?file=/src/App.js:349-741
You can modify your code similar to this using a conditional operator as well.
{data.filter(filterChampions).map((champion) => {
if(data.filter || champion){
return (
<div className='not__found'>
<h1>No champion has been found</h1>
</div>
)
}
This if statement is not nesserasy, if an item has not been found => data.filter(filterChampions) will be an empty array, the map function will return nothing, the if statement doesn't even run.
It you want to display the message, you could simply use this:
{data.filter(filterChampions).length === 0 && (<div className='not__found'>
<h1>No champion has been found</h1>
</div>)}
I have a functional element in react js like this,
function FilterOptions() {
const [isShown, setIsShown] = useState(false);
return (
<div className="filter__options">
{["Category", "Design", "Size", "Style"].map((ourOption) => (
<div
onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}
className="filter__options__container"
>
<div className="filter__options__button">
{ourOption}
</div>
{isShown && <div className="filter__options__content"> Here I want to return the element using props </div>}
</div>
))}
</div>
);
}
I have created a files called, Category.js, Design.js, Size.js, Style.js.
Now I want to use the props so that I can concatenate like this <{ourOption}> <{ourOption}/> so that this will return element.
Any idea how to do this guys?
Choosing the Type at Runtime
First: Import the components used and create a lookup object
import Category from 'Category';
import Design from 'Design';
import Size from 'Size';
import Style from 'Style';
// ... other imports
const components = {
Category,
Design,
Size,
Style,
// ... other mappings
};
Second: Lookup the component to be rendered
function FilterOptions() {
const [isShown, setIsShown] = useState(false);
return (
<div className="filter__options">
{["Category", "Design", "Size", "Style"].map((ourOption) => {
const Component = components[ourOption];
return (
...
<div className="filter__options__button">
<Component />
</div>
...
))}}
</div>
);
}
Alternatively you can just import and specify them directly in the array to be mapped.
function FilterOptions() {
const [isShown, setIsShown] = useState(false);
return (
<div className="filter__options">
{[Category, Design, Size, Style].map((Component) => (
...
<div className="filter__options__button">
<Component />
</div>
...
))}
</div>
);
}
Instead of strings you could iterate over Array of Components
{[Category, Design, Size, Style].map((Component) => (
<Component/>
);
Ill do this as react document
//create components array
const components = {
photo: Category,
video: Design
.....
};
{
Object.keys(components).map((compName) => {
const SpecificSection = components[compName];
return <SpecificSection />;
})
}
Here is a small sample code that you can work with. Use direct component instead of trying to determine by strings.
const Comp1 = () => {
return <p>Comp1 Here</p>
}
const Comp2 = () => {
return <p>Comp 2 Here</p>
}
export default function App() {
return (
<div className="App">
{[Comp1, Comp2].map(Komponent => {
// use Komponent to prevent overriding Component
return <Komponent></Komponent>
})}
</div>
);
}
I've created a very simplified code version of my problem to understand the REACT rendering using typescript. When I click a button which changes state in the lowest child element all parent elements are updated by the renderer and their children on other forks. How can I change the below so it doesn't do that.
import * as React from 'react';
import { connect } from 'react-redux';
import './Grid.css';
const RenderPopup = (key: number) => {
const open = () => setShowDialog(true);
const [showDialog, setShowDialog] = React.useState(false);
const close = () => setShowDialog(false);
if (!showDialog) {
return (
<div>
<button onClick={open}>do it</button>
</div>
)
}
else {
return (
<div>
<button onClick={close}>close
</button>
</div>
)
}
}
function Cell(key:number) {
return (
<div key={key}>
{key}
{RenderPopup(key)}
</div>
)
}
const Header = () => {
return (
<div className="gridRow">
{Cell(0)}
{Cell(1)}
{Cell(2)}
</div>
)
}
const Person = (rowNum: number) => {
return (
<div key={rowNum} className="gridRow">
{Cell(0)}
{Cell(1)}
{Cell(2)}
</div>
)
}
const Persons = () => {
return (
<div>
{Person(1)}
{Person(2)}
{Person(3)}
</div>
)
}
const Grid = () => {
return (
<div>
<Header />
<Persons />
</div>
);
}
export default connect()(Grid);
I have a search page, which queries an api to get an array of objects. It then renders a for each element of the array. I'm trying to achieve this like so:
export default class SearchScreen extends Component {
constructor(props) {
super(props);
this.state = {
results: null
};
}
componentDidMount() {
const apiUrl =
"foo";
fetch(apiUrl)
.then(response => response.json())
.then(response =>
this.setState({
results: response.results
})
);
}
render() {
{this.state.results ? (
const items = this.state.results.map((item, index) => {
return (
<div>
<SearchResult name={item.name} />
</div>
);
})
return <div>{items}</div>;
) : (<div> LOADING...</div>)}
}
So, if this.state.results is not null, it should map its contents to a const, and then generate SearchResult elements.
It is complaining that const is an unexpected keyword. Is there something wrong with conditionally defining constants?
The syntax is incorrect, below is fixed one:
render() {
const items = this.state.results ? (
this.state.results.map((item, index) => {
return (
// Use better key
<div key={index}><SearchResult name={item.name} /></div>
);
}
)) : 'LOADING...';
return <div>{items}</div>;
}
Statements (like const items = [];) cannot be used with the ternary operator. You can only use expressions. If you want to write a full statement, you have to use if.
You can change the logic a bit to accomplish what you want with the ternary operator though:
return this.state.results ? (
<div>
{this.state.results.map((item, index) => (
<div>
<SearchResult name={item.name} />
</div>
))}
</div>
) :
(
<div> LOADING...</div>
);
Try to fix like this:
render() {
return (
<div>
{this.state.results
? this.state.results.map((item, index) => <SearchResult name={item.name} />)
: 'LOADING...'}
</div>
);
}