The same data for different list items. React.js - reactjs
I'm new to React.js and I'm trying to make a study project. The problem I have is the following. I have a list of JSON objects (posts) that must be shown, and when clicking the title, the post details appear in a modal window. But independently on the post I click, the modal window always shows me only the first post's details. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>React App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</head>
<body>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/babel">
const postsList = [
{
"id": "5",
"title": "Lorem Ipsum dolor",
"contents": "Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna. Cupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad. Nisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.",
"published": "12.12.1221, 12:10",
"author": {
"nickname": "paladdin"
}
},
{
"id": "3",
"title": "Ex sunt sunt aliqua",
"contents": "Ex sunt sunt aliqua reprehenderit aliqua occaecat. Minim anim commodo officia veniam proident aute cillum eu sunt aute nostrud. Laboris fugiat velit ut pariatur occaecat adipisicing pariatur occaecat. Duis sint enim et consectetur quis pariatur laborum excepteur. Ipsum aliquip qui laborum commodo consectetur do velit veniam occaecat. Ad nisi dolor cillum elit magna dolor voluptate ea. Enim in duis ea consequat sunt Lorem aute.\n\nEst elit sunt quis officia reprehenderit do elit commodo eiusmod esse voluptate. Sit ipsum commodo sint voluptate culpa labore elit magna ullamco nostrud. Laboris magna magna anim labore mollit irure voluptate. Aute non magna aliqua aliqua sunt. Velit mollit consectetur aliqua id tempor ut. Tempor cupidatat aliquip excepteur occaecat incididunt nulla Lorem sint.\n\nNon commodo anim deserunt in et aliquip incididunt ut consectetur sunt esse commodo deserunt et. Tempor fugiat laboris cillum laboris labore. Deserunt quis ad do labore amet culpa officia. Esse et officia nostrud tempor occaecat officia anim incididunt amet sunt excepteur Lorem. Aute occaecat magna velit nisi sit anim consequat velit qui pariatur. Esse incididunt id officia aliqua anim ut et.",
"published": "12.12.1221, 12:05",
"author": {
"nickname": "rebelizer"
}
},
{
"id": "1",
"title": "Hello my new world",
"contents": "Culpa dolor deserunt veniam irure amet officia excepteur labore nisi labore ad labore laborum aute. Ea irure sit exercitation ex. Aliquip dolore duis ullamco labore qui. Et anim irure laborum quis ipsum. Adipisicing culpa est ea velit veniam dolor nisi. Sit cupidatat velit commodo eu.\n\nUt nulla ut irure cillum irure sint sunt cupidatat tempor laboris incididunt elit occaecat fugiat. Reprehenderit enim cupidatat consectetur pariatur ad pariatur consequat veniam do fugiat Lorem laborum do velit. Nulla aute magna magna nisi officia et. Aute adipisicing eu eiusmod tempor exercitation sint non enim laboris dolor adipisicing.\n\nEa do sint pariatur voluptate ad culpa irure. Cillum pariatur deserunt fugiat elit. Exercitation labore amet deserunt magna. Velit veniam aute officia aliqua ipsum veniam pariatur. Aliquip ullamco fugiat officia non sunt ad consequat ipsum est esse commodo reprehenderit. Ad quis consectetur est exercitation fugiat eiusmod. Laborum reprehenderit esse qui irure.",
"published": "12.12.1221, 12:00",
"author": {
"nickname": "rupetra"
}
}
];
class Post extends React.Component {
render() {
const {post} = this.props;
return (
<div className = "card" style={{width: "100%"}}>
<div className = "card-header text-center">
<h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>
</div>
<div className = "card-body text-left">
{post.contents}
</div>
<div className = "card-footer text-right text-muted">
published on {post.published} by <i>{post.author.nickname}</i>
</div>
<div className="modal fade" id="post-details-modal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">{post.title}</h4>
<button type="button" className="close" data-dismiss="modal" aria-label="Close"> x </button>
</div>
<div className="modal-body">{post.contents}</div>
<div className="modal-footer text-muted">created by {post.author.nickname}</div>
</div>
</div>
</div>
</div>
);
}
}
class PostList extends React.Component {
render() {
const {posts} = this.props;
return posts.map((post) =>
<div key= {post.id} className="posts">
<Post post = {post}/>
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<div className="row"></div>
<div className="row">
<div className="col-1 text-right mt-4">
<div>
<i className="fas fa-keyboard fa-3x mb-5"></i>
</div>
<div>
<i className="fas fa-redo-alt fa-3x mb-5"></i>
</div>
</div>
<div className="col-8 posts-zone">
<PostList posts = {postsList}/>
</div>
<div className="col-3"></div>
</div>
<div className="row"></div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
</script>
<div id="root"><div>
</body>
</html>
Solution:
Thanks to Tim Ogilvy, who gave me the rihgt idea, the following solution has been found:
In render() method I created 2 variables:
const dataTargetName = "#post-details-modal-" + post.id;
const postDetailsId = "post-details-modal-" + post.id;
and then:
<h2 data-toggle="modal" data-target={dataTargetName}>{post.title}</h2>
and:
<div className="modal fade" id={postDetailsId}>
You need to use a component with a state of open and closed. Bootstrap and jQuery are not the right solution here. Also you should be using stateless/pure components for most of this. Your issue is in the Post Component.
here you set what it should toggle:
<h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>
and then you set the ID to the same thing for every post in the iterator:
<div className="modal fade" id="post-details-modal">
Try this for example: (the toggle)
<h2
data-toggle="modal"
data-target={`#post-details-modal-${post.id}`}
>
{post.title}
</h2>
the post:
<div className="modal fade" id={`post-details-modal-${post.id}`}>
You should still consider using ReactBootstrap, but this might just get you out of the woods.
The principle: DOM Id's must be unique. You have multiple instances of the same ID so the browser is just going for the first.
Related
Toggle FieldSet from an other component
How to make PrimeReact FieldSet controllable from an other (parent) component on React?
I have a boolean object toggled, i would like to pass it into child component.
When toggled = true, the FieldSet should be opened.
When toggled = false, the FieldSet should be closed.
import React from "react";
import { Fieldset } from "primereact/fieldset";
const FieldsetDemo = () => {
return (
<div>
<div className="card">
<h5>Toggleable</h5>
<Fieldset legend="Header" toggleable>
<p>
Lorem ipsum dolor sit amet.
</p>
</Fieldset>
</div>
</div>
);
};
Its easy. Working code sandbox: https://codesandbox.io/s/quizzical-snow-so91tv?file=/src/demo/FieldsetDemo.js
const FieldsetDemo = (props) => {
return (
<div>
<div className="card">
<h5>Toggleable</h5>
<Fieldset legend="Header" toggleable collapsed={props.collapsed}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</Fieldset>
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<FieldsetDemo collapsed={true} />, rootElement);
React Bootstrap column not showing horizontally
I'm building a react app and I am having problems getting my react-bootstrap columns to show horizontally. I would like the image to appear next to the text not above it. I don't know what I am doing wrong. Below is my code:
function About() {
return (
<Container fluid className="about-us">
<Row>
<Col sm={4}>
<Image src={require('../techOn.png')} style={{height:"250px", width: "300"}} />
</Col>
<Col sm={4}>
<h2>Meet The Team</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
</Col>
</Row>
</Container>
);
}
Needed to add display: flex in css for row
return (
<Container fluid className="about-us">
<Row style={{display:"flex"}}>
<Col sm={4}>
<Image src={require('../techOn.png')} style={{height:"250px", width: "300"}} />
</Col>
<Col sm={4}>
<h2>Meet The Team</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</p>
</Col>
</Row>
</Container>
);
}
¿How can I split my text in two columns in a VF rendered as PDF? #CSS Not working properly
My code is something like that:
<apex:page renderAs="pdf" standardController="Account" extensions="CNT_Generar_InfoAbante" sidebar="false" showHeader="false" applyBodyTag="false" >
<head>
<style type="text/css" media="print">
#contenedorBody {
column-count: 2;
column-width: 100px;
column-gap: 20px;
text-align: justify;
width: 100%;
height: 1018px;
max-width: 100%;
max-height: 1018px;
}
.contenedorFooter {
width: 100%;
height: 48px;
max-height 48px;
/* background: rgb(255, 220, 206); */
}
</style>
</head>
<div id="contenedorBody">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="contenedorFooter">
<table>
<tr>
<td class="width70"> </td>
<td class="width30"><apex:image styleclass="imgFooter" width="145" height="46" value="{!$Resource.imgLogo}"/></td>
</tr>
</table>
</div>
But still displaying this
Image Pdf 1
instead like this Image Pdf 2 .
I'm just trying to split my text in two columns, but when I render my page as PDF it looks like the CSS stop working. Could somebody help me? Thank you!
AngularJS: After filter, detail screen still shows non-filtered index for Route Parameter
On AngularJS, I have a filter for a SKU and a Name. Those work great in filtering the correct information. However, when I want to load the information in the detail screen using routing to show more, it still loads the index 0, even though I'm selecting a different option. I'm not quite sure what's missing to get this to show the correct detail page.
Here is the HTML:
<input ng-model="search.name" placeholder="Enter search term here...">
<input ng-model="search.upc" placeholder="Enter SKU here...">
<li ng-repeat="product in productsArray | filter:search | filter:upc">
<button class="productListItem">{{product.name}}</button></li>
-------------------------`
Here is the JavaScript:
angular.module("ingredientProducts", ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/main',{
templateUrl: "main.html",
controller : "mainController"
}).when('/detail/:productID',{
templateUrl: "details.html",
controller : "detailsController"
}).otherwise({
redirectTo : "/main"
});
})
.controller("mainController", function($scope, dataService){
var productsArray = [];
$scope.productsArray = dataService.getProducts();
})
.controller("detailsController", function($scope, $routeParams, dataService){
$scope.product= dataService.getProductAt($routeParams.productID);
});
angular.module("ingredientProducts").service("dataService", function(){
var productsArray = [
{name: "Glass Container",
upc: "2000000000",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
}];
this.getProducts = function(){
return productsArray;
};
this.getProductAt = function(product){
this.getProducts();
return productsArray[product];
};
});
Thank you for your help!
You can't rely on $index becouse when you filter your array index of product will be not equal to product index in your service.
Please see here for solution http://plnkr.co/edit/xFMkHxwDwkJfcqwnbHg8?p=preview
Main View:
<li ng-repeat="product in productsArray | filter:search | filter:upc">
<button class="productListItem">{{product.name}}</button></li>
Data Service:
angular.module("plunker").service("dataService", function(filterFilter) {
var productsArray = [{
name: "Glass Container",
upc: "2000000000",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Jar",
upc: "2000000001",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Tent",
upc: "2000000002",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Bootle",
upc: "2000000003",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
}];
this.getProducts = function() {
return productsArray;
};
this.getProductAt = function(_upc) {
this.getProducts();
return filterFilter(productsArray, {upc:_upc})[0];
};
});
How to use accordions in angular?
I have an accordion like the following. The issue I am having is if I click on "Section One", the accordion appears to expand, but in fact it refreshes the page and I cant collapse it. How to allow the accordion to open, but not cause a page refresh? (I would like the accordion to be able to open multiple sections at the same time) <div class="accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle-small" data-toggle="collapse" data-parent="#accordianParent" href="#sectionOne" style="border-left: 3px solid red;padding-left:10px;"> Section One </a> </div> <div id="sectionOne" class="accordion-body collapse"> <div class="accordion-inner-small"> Here is all the wonderful stuff in section ONE.<br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle-small" data-toggle="collapse" data-parent="#accordianParent" href="#sectionTwo"> Section Two </a> </div> <div id="sectionTwo" class="accordion-body collapse"> <div class="accordion-inner-small"> Here is all the wonderful stuff in section TWO.<br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>
You are using the Bootstrap accordion and the href link that is in the accordion is not being intercepted by Angular and hence the full page load. I suggest you look at UI Bootstrap or Angularstrap for accordion. Or else look at bootstrap docs to find if the behaviour can be supported without href.