How to repeat two elements in a react component - javascript

I am using semantic ui and I need to build an accordion component. So this is what I come up with, but this doesn't work as the usage of .title and .content is wrong.
How should this be done correct?
import React, { Component } from 'react';
export default class Example extends Component {
getData() {
// some data
}
render() {
return (
<div className="ui styled fluid accordion">
{
this.getData().map((element) => {
return (
<div className="title">
<i className="dropdown icon"></i>
{ element.title }
</div>
<div className="content">
<ul className="ui list">
<li>Lorem ipsum</li>
</ul>
</div>
);
})
}
</div>
);
}
}
Update
The result should be like
<div class="ui accordion">
<div class="active title">
</div>
<div class="active content">
</div>
<div class="title">
</div>
<div class="content">
</div>
</div>

You can return only one component from a function.
In your case the map is a wrong choice. Try this in your render function:
// build the array of all elements
const accordionChildren = [];
this.getData().forEach(element => {
accordionChildren.push(
<div className="title">{element.title}</div>,
<div className="content">{element.content}</div>
);
});
return (
<div className="ui styled fluid accordion">
{accordionChildren}
</div>
);

It's invalid syntax to return two components in any part of the code. The issue is this snippet:
...
return (
<div className="title">
<i className="dropdown icon"></i>
{ element.title }
</div>
<div className="content">
<ul className="ui list">
<li>Lorem ipsum</li>
</ul>
</div>
);
...
However, you should be able to get them to render next to each other by returning an array:
...
return (
[(<div className="title">
<i className="dropdown icon"></i>
{ element.title }
</div>),
(<div className="content">
<ul className="ui list">
<li>Lorem ipsum</li>
</ul>
</div>)]
);
...

Related

My `addToCart` function is not showing any result

This is the code where I have my addtocart function,
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0)
return (
<div>
<div className="cart">
<i class="fa-solid fa-cart-shopping"></i>
<div id="number">=</div>
</div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount( count +1)} >
{/* <a id="cart" href="https://wa.me/<919650988301>" target='_blank' rel="noreferrer" className='no1'>Add to cart</a></button> */}
Add to cart </button>
</div>
</div>
<script ></script>
</div>
)
}
When I do,
number.innerHTML+=`${items}`
instead of
number.innerHTML=`${items}`
then the numbers are concatenated like strings.
Otherwise, nothing is happening, what is wrong here?
Can you suggest me some edits in the same code.
As you are using React framework you should use React hooks
Here is an example:
import React, { useState } from 'react'
import './Body.css'
// import './Cart.js'
export default function Pricetag(props) {
const [cartCount, setCartCount] = useState(0)
return (
<div>
<div className="cart">
<i class="fa-solid fa-cart-shopping"></i>
<div id="number">={cartCount}</div>
</div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(cartCount +1))} >
{/* <a id="cart" href="https://wa.me/<919650988301>" target='_blank' rel="noreferrer" className='no1'>Add to cart</a></button> */}
Add to cart </button>
</div>
</div>
</div>
)
}
Working on codesandbox

React Grid List Component PreSelect?

I have this function in my home.jsx:
function GridListComponent(options) {
return (
<li>
<input type="checkbox" id={options.id} />
<label htmlFor={options.id}>{options.tileInfo}</label>
</li>
);
}
function Home() {
return (
<div className="home">
<div class="container">
<div class="row align-items-center my-5">
<div class="col-lg-12">
<h1 class="font-weight-light">Site Setting</h1>
<p>Pillar Selection:</p>
</div>
<ul className="grid">
<GridListComponent id="grid-opt-1" tileInfo="A" />
<GridListComponent id="grid-opt-2" tileInfo="B" />
<GridListComponent id="grid-opt-3" tileInfo="C" />
<GridListComponent id="grid-opt-4" tileInfo="D" />
</ul>
</div>
</div>
<hr />
</div>
);
}
And it works fine. All I need is to pre-select 1 or 2 options.
Currently, once the page loads, I see this:
pageLoads
And here is what happens when click:
pre-select
so All I need is to have A and C pre-selected.

bootstrap card shows vertically instead of being responsive

The data variable contains all the data needed for this operation the problem is that the frontend shows card one below the other whereas I want it to show 3 or 4 in one row. I can assure that the error is not with the react or the graphql, the error is in the bootstrap or the way I am rendering the data.
I just want a responsive design so at first i have created a html css bootstrap ui which was perfectly working and was responsive but when i combined it with the data it lost its responsiveness and now it shows cards one below the other.
here is the image of how it is currentlyIt shows that there is a card but no other card along the row
Here is my code:
import React, { useState } from "react";
import { gql, useQuery } from "#apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
{
books {
name
id
genre
author {
name
}
description
rating
image
}
}
`;
function BooksDisplay() {
const { loading, error, data } = useQuery(getBooksQuery);
var [selected, setSelected] = useState("");
if (loading) return <p>Loading....</p>;
if (error) return <p>Ops! Something went wrong</p>;
return (
<div>
<div id="book-list">
{data.books.map((book) => (
<div className="container-fluid my-5 books_section">
<div className="row">
<div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
<div className="card h-100">
<img src={book.image} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title font-weight-bold text-secondary">
{book.name}
</h5>
<span className="card-text">
{book.description}
<div className="collapse m-0" id="collapseExample">
<div className="card card-body border-0 p-0">
{book.description}
</div>
</div>
</span>
<a
className="card-link d-block"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
See More
</a>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">
Authors:
<span>
{book.author.map((author) => author.name).join(" ")}
</span>
</li>
<li className="list-group-item">
Genre: <span>{book.genre.join(" ")}</span>
</li>
<li className="list-group-item">
Ratings: <span>{book.rating}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
))}
</div>
{/* <BookDetail bookid={selected} /> */}
</div>
);
}
function BookList() {
return (
<div>{BooksDisplay()}</div>
);
}
export default BookList;
You need to iterate the columns instead of the container...
import React, { useState } from "react";
import { gql, useQuery } from "#apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
{
books {
name
id
genre
author {
name
}
description
rating
image
}
}
`;
function BooksDisplay() {
const { loading, error, data } = useQuery(getBooksQuery);
var [selected, setSelected] = useState("");
if (loading) return <p>Loading....</p>;
if (error) return <p>Ops! Something went wrong</p>;
return (
<div>
<div id="book-list">
<div className="container-fluid my-5 books_section">
<div className="row">
{data.books.map((book) => (
<div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
<div className="card h-100">
<img src={book.image} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title font-weight-bold text-secondary">
{book.name}
</h5>
<span className="card-text">
{book.description}
<div className="collapse m-0" id="collapseExample">
<div className="card card-body border-0 p-0">
{book.description}
</div>
</div>
</span>
<a
className="card-link d-block"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
See More
</a>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">
Authors:
<span>
{book.author.map((author) => author.name).join(" ")}
</span>
</li>
<li className="list-group-item">
Genre: <span>{book.genre.join(" ")}</span>
</li>
<li className="list-group-item">
Ratings: <span>{book.rating}</span>
</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
{/* <BookDetail bookid={selected} /> */}
</div>
);
}
function BookList() {
return (
<div>{BooksDisplay()}</div>
);
}
export default BookList;
Just put these 2 tags out of the loop
< div className="container-fluid my-5 books_section">
< div className="row">
And it will work.

ReactJs how to get specific props data in child component

I get API data in DownloadsHistory.jsx and passed props in the child components like below code:
<DownloadData
downloadToday={d.today}// need that separatly
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
If I console in DownloadData.jsx get below data:
{downloadToday: "55628", downloadYesterday: "98569", downloadLastWeek: "720570", downloadAllTime: "143086901"}
I get all the props data if I called <DownloadHistory/>. that's fine but how can I get single data from it? Suppose I want only {this.props.downloadToday}. on a third.jsx
Add more details code below:
DownloadHistory.jsx
import React, { Component } from "react";
import axios from "./axios";
import DownloadData from "./download-view";
class DownloadsHistory extends Component {
state = {
data: [],
};
componentDidMount() {
var slug = "contact-form";
const url =
"https://api.xyz.com/downloads.php?slug=" +
slug +
"&limit=10&historical_summary=1";
axios.get(url).then((res) => {
this.setState({ data: res.data });
});
}
constructor(props) {
super(props);
this.state = {};
}
render() {
var d = this.state.data;
if (!d) return <div className="loading"></div>;
return (
<div>
<DownloadData
downloadToday={d.today}
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
</div>
);
}
}
export default DownloadsHistory;
download-view.jsx
import React, { Component, Fragment } from "react";
class DownloadData extends Component {
render() {
console.log(this.props);
return (
<Fragment>
<table className="table" style={{ fontSize: 13, textAlign: "left" }}>
<tbody>
<tr>
<td>Today</td>
<td>{this.props.downloadToday}</td>
</tr>
<tr>
<td>Yesterday</td>
<td>{this.props.downloadYesterday}</td>
</tr>
<tr>
<td>Last Week</td>
<td>{this.props.downloadLastWeek}</td>
</tr>
<tr>
<th>All Time</th>
<th>{this.props.downloadAllTime}</th>
</tr>
</tbody>
</table>
</Fragment>
);
}
}
export default DownloadData;
widget.jsx
import React, { Fragment, Component } from "react";
import { faStar, faCheck } from "#fortawesome/free-solid-svg-icons";
import DownloadsHistory from "./DownloadsHistory";
import ActiveVersion from "./active-version";
import Downloads from "./download";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
class Widget extends Component {
render() {
console.log(this.props);
return (
<Fragment>
<div className="row mt-5">
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download Today</div>
</div>
<div className="widget-body clearfix pt-0">
<div className="pull-left">
<FontAwesomeIcon icon={faCheck} color="#28a745" />
</div>
<div className="pull-right number">
<DownloadsHistory /> {/* Need only Today Data here*/}
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download History</div>
</div>
<div className="widget-body clearfix pt-0">
<DownloadsHistory /> {/* okay here */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Active Install</div>
</div>
<div className="widget-body clearfix pt-0">
<div className="pull-left">
<FontAwesomeIcon icon={faCheck} color="#28a745" />
</div>
<div className="pull-right number">
{this.props.active_installs}+
<div style={{ fontSize: 13 }}>
but less than {this.props.probable_active_install}
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Average Ratings</div>
</div>
<div className="widget-body clearfix">
<div className="pull-left">
<FontAwesomeIcon icon={faStar} color="#28a745" />
</div>
<div className="pull-right number">{this.props.AvgRating}</div>
<div style={{ fontSize: 13 }}>
based on {this.props.number_of_rating} reviews
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download History</div>
</div>
<div className="widget-body clearfix pt-0">
<DownloadsHistory />
</div>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className=" text-center">
<div className="clearfix">
<div className="pull-left">Active version</div>
</div>
<div className="clearfix pt-0">
<ActiveVersion />
</div>
</div>
</div>
</div>
</Fragment>
);
}
}
export default Widget;
** widget.jsx has some props from another parent.
Form your description I'm assuming that the DownloadData component is being rendered inside the DownloadHistory component. If it's the case, then you can simply place the Third component along with the DownloadData component and pass the downloadToday={d.today} only into the Third component.
Like this:
<DownloadData
downloadToday={d.today}// need that separatly
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
<Third downloadToday={d.today} />
Hope this will help.
You need to call the web service from the parent of both and pass the props to components.

How to Integrate html with ReactJS

I am working on the reactjs project.
what happened
I have following reactjs code written into javascript file.
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactBootstrap, { Jumbotron, Container, Row, Col, Column, Image, Button } from 'react-bootstrap';
class Homepage extends Component {
render() {
return (
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
);
}
}
export default Homepage;
what is issue
when i try to compile using npm start , it throws following error :
Error: The style prop expects a mapping from style properties to
values, not a string. For example, style={{marginRight: spacing +
'em'}} when using JSX.
in li (at homePage.js:13)
in ul (at homePage.js:12)
in div (at homePage.js:11)
in aside (at homePage.js:10)
in Homepage (created by Context.Consumer)
not able to understand, how to integrate html code into reactjs router dom. is this something style issue OR the version mismatch issue.
version details :
react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
please suggest.
ReactJs uses JSX instead of html (https://reactjs.org/docs/introducing-jsx.html). There are some differences, for example, instead of "class" you must use "className". Instead
style="background-image: url(images/img_bg_2.jpg)";
you must use
style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}
Your code should look like this:
<aside id="fh5co-hero">
<div className="flexslider">
<ul className="slides">
<li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_3.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
by default react( aka: JSX ) can't have inline styles like what you pasted therem you need to convert them to JSS style like below:
// for example "background-image: url(images/img_bg_3.jpg);
<li style={{ backgroundImage: 'url(SOME_IMAGE_URL)' }}> ... </li>
<li style={{ backgroundImage: `url(${IMPORTED_IMAGE})` }}> ... </li>
This code <li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
Should be <li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
The style prop in React expects an object and not a CSS string.
The style attribute is written in react js as follows
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
Note that we can't use dash between words (-) flex-direction is turned to felxDirection and so on
also the value has to be put inside single or double quotes

Categories