on games page if you are search a game, page is redirect to search result page. I want a filter on search result page. When I checked checkbox, data will be filtered.
json format is here
{"id": 26,
"title": "ebirth",
"sortName": "",
"isFullyOptimized": false,
"steamUrl": "",
"store": "",
"publisher": "",
"genres": ["Action", "Simulation"],
"status": "AVAILABLE"}
I have a aside menu component there is checkboxes. I want when I checked checkbox here I filtered by genres and status to my search results. Data returned from search results here
{gameIds.length > 0 && (
<div className="search-result__content">
<div className="search-result__title">
<h2>Search Results</h2>
<span>{data.filter(({ id }) => gameIds.includes(id)).length} results</span>
</div>
<div className="game-card__content">
{data
.filter(({ id }) => gameIds.includes(id))
.map((item, i) => {
return (
<a key={i} href={item.steamUrl} className={item.steamUrl && "has-url" ? "has-url" : ""}>{item.title}</a>
);
})}
</div>
</div>
)}
How can I do this?
Here is the code
https://codesandbox.io/s/strange-bardeen-pf1k0
Related
Hello
I am trying to implement a photogrid from a json file.
Displaying the photographs is ok, but I can't figure how to display the relative color boxes under each photograph
Here is an extract of my json file :
"images": [
{
"name": "1020.jpg",
"palette": [
"#b43f45",
"#1c2c6c",
"#e5c8c0",
],
"tags": [0,3],
"prompt": "retro 1980 computer tech character"
},
In this case the idea is puting under thr photograph three boxes with the mentioned color.
Here is my code working :
import myjson from "./refs.json";
import PickColor from "./PickColor";
function App() {
const images = myjson.images;
return (
<div>
<div className="gallery">
{images.map((index, i) => {
return <img src={`./images/${index.name}`} key={i} alt="" />;
})}
</div>
</div>
);
}
I have trouble looping for the color palette (should it be nested inside the first callback ) and passing the right color information to a div
EDIT 01
I have tried this solution. Compiling is ok but no result.
<div className="gallery">
{images.map((index, i) => {
return (
<div>
<img src={`./images/${index.name}`} key={i} alt="" />
{index.palette.map((index, i) => {
return (<div className="colorBox" style={{backgroundColor:`"${index[i]}"`}} />);
})}
</div>
);
})}
</div>
I guess the problem is inside the style attribute (by the way I have learned I needed double curly brackets for that) where I tried to access these color information.
"images": [
{
"name": "1020.jpg",
"palette": [
"#b43f45",
"#1c2c6c",
"#e5c8c0",
I'm working on a Gatsby project that uses Contentful as its headless CMS - and rendering a particular rich text field is driving me insane.
This is an example of the document I'm trying to render - It's basically an ordered list:
{
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "ordered-list",
"content": [
/* item 1 */
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Lorem 1.",
"marks": [],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
/* item 2 */
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Lorem 2",
"marks": [],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
],
"data": {}
}
]
}
And I want to render it on my Gatsby project without it's ol and li tags, like this:
<div class="single-instruction">
<header>
<p>Step 1</p>
<div></div>
</header>
<p>Lorem 1.</p>
</div>
<div class="single-instruction">
<header>
<p>Step 1</p>
<div></div>
</header>
<p>Lorem 2.</p>
</div>
Following Contentful's docs, I'm trying to render this using the #contentful/rich-text-types package. This is how far I managed to get:
import { BLOCKS } from "#contentful/rich-text-types";
import { renderRichText } from "gatsby-source-contentful/rich-text";
const options = {
renderNode: {
[BLOCKS.LIST_ITEM]: (node, children) => (
<div className="single-instruction">
<header>
<p>step </p>
<div></div>
</header>
{children}
</div>
),
},
};
renderRichText(instructions, options)
Which, of course, doesn't render the step number.
I feel I'm so close now! But for the life of me, I can't seem to find the right way to render the ordered list item index. Which is something I would easily get if this were an array that I could simple map.
Does anyone know what I'm missing here?
I have been facing the same issue. I used the counter-increment and counter css properties to generate the step numbers.
.instructions {
counter-increment: step;
}
.single-instruction .step::after {
content: counter(step);
}
<div class="instructions">
This is one list
<div class="single-instruction">
<header>
<p class="step"></p>
<div></div>
</header>
children
</div>
<div class="single-instruction">
<header>
<p class="step"></p>
<div></div>
</header>
children
</div>
</div>
<div>
This is another list
<div class="single-instruction">
<header>
<p class="step"></p>
<div></div>
</header>
children
</div>
<div class="single-instruction">
<header>
<p class="step"></p>
<div></div>
</header>
children
</div>
</div>
In this case you could use the CSS counter() variable to add step numbers via CSS.
So your CSS might look something like:
.single-instruction {
counter-reset: section;
}
.single-instruction p:after {
counter-increment: section;
content: counter(section);
}
The code above will add the counter on each paragraph (for the header paragraph content and the actual content paragraphs), so you'll need to add a custom class for the paragraph tags you want to target.
The only caveat is that I'm not sure how well this will work with screen readers and other assistive technology without digging deeper.
More information here: https://www.w3schools.com/CSS/css_counters.asp
I am new to react. I am working on a project where I want to render checkboxes from an array that is coming from API response, where based on the phrase matching I have to group the options. i.e if item contains "BLR" it will group to all "BLR-" items
API response is :
[
"AU-COPS",
"BLR",
"BLR- End to End ACT testers",
"BLR-ACT-FUNCTIONAL",
"BLR-ACT-POLICY",
"BLR-ASM",
"BLR-ASM-FUNCTIONAL",
"BLR-ASM-POLICY",
"BLR-DAG",
"BLR-DEMO",
"BLR-MANAGED",
"BLR-QI",
"BLR-TOOLS",
"DE-COPS",
"demo-1",
"demo-2",
"ES- Audit (S&Q)",
"ES- Managed",
"ES-COPS",
"ES-Functional (managed/unmanaged)",
"FR- Audit (S&Q)",
"FR- Functional (managed/unmanaged)",
"FR-COPS",
"FR-Managed",
"IT- Functional (managed/unmanaged)",
"IT- Managed",
"IT-Audit (S&Q)",
"IT-COPS",
"JP-COPS",
"SEA-MANAGED",
"SJO-COPS",
]
For grouping, I have created one more array
var ch = ["BLR", "UK", "IT", "ES", "SEA"]
my code to render check box:
<div>
{listOfCheckboxes &&
checkBoxHeading.map((item, index) => {
return (
<>
<h8>{item}</h8>
<div key={index}>
{listOfCheckboxes.filter((childItem, childIndex) => {
if (childItem.includes(item))
return (
<div key={childIndex}>
<label htmlFor={childItem}>{childItem}</label>
<input
type="checkbox"
id={childItem}
name={childItem}
value={childItem}
></input>
</div>
);
})}
</div>
</>
);
})}
</div>;
Please help me guys!!
The output I am getting is listed all items without checkboxes.
In React I have an array of projects (only 2 in this example). Each project has:
key
name
info
I would like to be able to render, for example, only one project name. Everything I have tried gives me the whole list. I am confused on the format I need to use to:
Set up my ID
Tell React what specific ID I want to render
I have tried creating different formats (Try number 1 & 2) using .map
function ProjectList() {
const projects = [
{
id: 0,
name: "Shop",
date: "2019",
info: "info of 1",
},
{
id: 1,
name: "Hotel",
date: "2019",
info: "info of 2",
},
]
const findProjectInfo = projects.map (project =>(
<div key={1}>
<h2 key={project.ID}>
{project.info}
</h2>
</div>
))
return (
<div>
<div className='TRY NUMBER ONE' key={1}>
{projects.map (project=> (
<div key={project.ID}>
<div> {project.name}</div>
<div> {project.info}</div>
</div>
))}
</div>
<div className='TRY NUMBER TWO' key={1}>
{findProjectInfo}
</div>
</div>
)
}
export default ProjectList
Everything I tried gives me the two items of my list and not only the 1st one as I would want.
Try something like that:
const projects = [
{
id: 0,
name: "Shop",
date: "2019",
info: "info of 1",
},
{
id: 1,
name: "Hotel",
date: "2019",
info: "info of 2",
},
];
function ProjectList() {
const [selectedProject,setSelectedProject] = React.useState(0);
return (
<React.Fragment>
<div>Select Project</div>
<button onClick={()=>setSelectedProject(0)}>Project 1</button>
<button onClick={()=>setSelectedProject(1)}>Project 2</button>
<br/><br/>
<div><b>Project name: </b>{projects[selectedProject].name}</div>
<div><b>Project date: </b>{projects[selectedProject].date}</div>
<div><b>Project info: </b>{projects[selectedProject].info}</div>
</React.Fragment>
);
}
ReactDOM.render(<ProjectList/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
.map will always return you an array with the same size as the original. What you want to do is find a specific element, like this:
const project1 = findProjectInfo.find(project => project.id === 1);
This will return a single object instead of an array, which you can then render:
<div>
<div>{project.name}</div>
<div>{project.info}</div>
</div>
More info on Array.prototype.find() here.
The key prop is not to be used for anything related to this. It is a special prop that helps React know when components change, and only usually needed when you want to render arrays (like when you use .map), or in a few more advanced cases.
You are simply iterating through your array, that is why you are getting every element from array as result.
You need to first filter your array using provided ID and then you can iterate using map,
{projects
.filter(projects => projects.id === providedID) //providedID can be stored in state
.map(project => (
<div key={project.id}>
<h2 key={project.id}>{project.info}</h2>
</div>
))
}
Demo
Note: Don't use key like this,
<div className='TRY NUMBER ONE' key={1}>
Also make sure you don't repeat the key for multiple elements.
Update
Changing state and getting project details based on selected project ID.
Demo1
I've a JSON Schema which has Array of images which I need to render into a carousel in ReactJS.
api.json
[
{
"id": "DR001",
"propertyFullName": "8838, Brook St, NY",
"propertyShortName": "Anchorage, AK 99501",
"features": ["2 beds", "1 bath", "865 sqft"],
"description": "data.",
"images": [
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
],
"status": true
},
{
"id": "DR002",
"propertyFullName": "8838, Brook St, NY",
"propertyShortName": "Anchorage, AK 99501",
"features": ["2 beds", "1 bath", "865 sqft"],
"description": "data.",
"images": [
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5",
"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
]
}
]
I am hard-coding the first array i.e. features like this
{APIData.map((apiData, index) => {
return (
<>
<Heading subtitle>
<span name={index}>{apiData.features[0]}</span>
<span class="middle-dot" aria-hidden="true">
</span>
<span>{apiData.features[1]}</span>
<span class="middle-dot" aria-hidden="true">
</span>
<span>{apiData.features[2]}</span> <br />
<span>
<p>{apiData.description}</p>
</span>
</Heading>
<hr />
</>
);
})}
Because, I know there will be only 3 features, but in case of images, it is dynamic. How come I overcome this?
The images are rendering in an other <div>, I've tried something like this
<Carousel {...settings}>
{APIData.map((images, index) => {
return (
<>{<img src={images.images} alt={index} />}</>
);
})}
</Carousel>
Using the code you already had, it will end up something like this to iterate through the images for every property:
<Carousel {...settings}>
{APIData.map((data, index) => {
data.images.map((image, index) => {
return <img key={index} src={image} alt={index} />
}
})}
</Carousel>
You can have a stateless component and render it inside the original map, like this
const Images = ({list}) => list.map(image => <img src={image}/>);
myArr.map(item => // some DOM here, and, at last: <Images list={item.images}>)
You know, not to repeat a map call inside another one, which, in my opinion, looks a bit ugly