We Keep Coding

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.

How to use props properly in react?

There is a button which I have in one of my components named header. I want to hide the navbar component based on that button. I tried creating a prop in the main component shown below which displays all the other components including header and navbar. Below is my main component.
import App from "./graph";
import Navbar from "./navbar";
import Header_Top from "./header";
import Flame from "./section_1";
import Section_3 from "./section_3_graph1";
// import Flame from "./section_test";
import Section_2 from "./section_2";
import Section_5 from "./section_5";
import Section_test from "./section_test";
class main extends Component {
constructor(props) {
super(props);
// this.fullscreenState = this.fullscreenState.bind(this);
}
state = {};
style2 = {
boxShadow:
" 0px 0px 40px rgba(255,255,255,0.08),inset 0px 0px 20px rgba(0,0,0,0.3)",
margin: 5,
padding: 0,
textAlign: "center",
// borderRadius: 20,
};
render() {
var fullscreenState = {
fullscreen: true,
};
return (
<div
className="row justify-content-center"
style={{
// backgroundColor: "#32373D",
backgroundImage: "linear-gradient(360deg, #191919, #272A2F)",
}}
>
<Header_Top fullscreenState={fullscreenState} />
{this.props.fullscreenState.fullscreen === true ? <Navbar /> : null}
<div className="row col-xl-9 col-lg-9 col-md-12 col-sm-12">
<div style={this.style1} className="col-xl-12">
<div className="col-md-12" style={this.style2}>
<Flame />
</div>
</div>
<div style={this.style1} className="col-xl-4 col-lg-8">
<div className="col-md-12" style={this.style2}>
<Section_2 />
</div>
</div>
<div style={this.style1} className="col-xl-8 col-lg-8" ref="inner">
<div className="col-md-12" style={this.style2}>
<Section_3 />
</div>
</div>
<div style={this.style1} className="col-xl-12 col-lg-12">
<div className="col-md-12" style={this.style2}>
<App />
</div>
</div>
</div>
<div className="column col-xl-3 col-lg-3 col-md-12 col-sm-12 ">
<div style={this.style1} className="col-xl-12 col-lg-12 my-auto">
<div className="col-md-12" style={this.style2}>
<Section_5 />
</div>
</div>
<div style={this.style1} className="col-xl-12 col-lg-12">
<div className="col-md-12" style={this.style2}>
<Section_test />
</div>
</div>
</div>
</div>
);
}
}
export default main;
This is my header component:
class Header_Top extends Component {
state = {
fullscreen: true,
};
toggleFullScreen = () => {
let fullscreen = this.props.fullscreenState.fullscreen;
this.setState({
fullscreen: !fullscreen,
});
};
changeLabel() {
let Label = "";
Label +=
this.props.fullscreenState.fullscreen === true
? "Exit full Screen"
: "Go to full Screen";
return Label;
}
render() {
return (
<div className="d-none d-md-block " style={{ width: "100%" }}>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">
<img
src={require("./images/logo.png")}
width="50"
// height="50"
class="img-responsive"
alt=""
style={{}}
/>
</a>
<a class="navbar-brand" href="#">
<h1>SolarSenz</h1>
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li className="nav-item">
<button
className="btn btn-outline-dark"
onClick={this.toggleFullScreen}
>
{this.changeLabel()}
</button>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle active"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Admin Console<span class="sr-only">(current)</span>
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
</div>
<a class="navbar-brand" href="#">
<img
src={require("./images/logo.png")}
width="50"
// height="50"
class="img-responsive"
alt=""
style={{}}
/>
</a>
</nav>
</div>
);
}
}
export default Header_Top;
I keep getting the error
TypeError: Cannot read property 'fullscreen' of undefined
What does this mean and how can I fix it?

The error you are getting is due to the following line (in 'render' function of class 'main'):
{this.props.fullscreenState.fullscreen === true ? <Navbar /> : null}
As the error indicates "this.props.fullscreenState" is udefined.
Props are arguments passed into React components. If no prop called "fullscreenState" was passed to class "main", it will be undefined.
What your are probably should do is to create state for the 'main' class which should include 'fullscreenState'. Then add this class a function that will toggle the state and pass it, together with the 'fullscreenState' to the 'header' component:
import App from "./graph";
import Navbar from "./navbar";
import Header_Top from "./header";
import Flame from "./section_1";
import Section_3 from "./section_3_graph1";
// import Flame from "./section_test";
import Section_2 from "./section_2";
import Section_5 from "./section_5";
import Section_test from "./section_test";
class main extends Component {
constructor(props) {
super(props);
this.state = {
fullscreen: false
}
// this.fullscreenState = this.fullscreenState.bind(this);
}
style2 = {
boxShadow: " 0px 0px 40px rgba(255,255,255,0.08),inset 0px 0px 20px rgba(0,0,0,0.3)",
margin: 5,
padding: 0,
textAlign: "center",
// borderRadius: 20,
};
toggleFullScreen = this.setState({fullscreen: !this.state.fullscreen});
render() {
return (
<div
className="row justify-content-center"
style={{
// backgroundColor: "#32373D",
backgroundImage: "linear-gradient(360deg, #191919, #272A2F)",
}}
>
<Header_Top fullscreenState={this.state.fullscreenState} toggleFullScreen={toggleFullScreen} />
{this.props.fullscreenState.fullscreen === true ? <Navbar /> : null}
<div className="row col-xl-9 col-lg-9 col-md-12 col-sm-12">
<div style={this.style1} className="col-xl-12">
<div className="col-md-12" style={this.style2}>
<Flame />
</div>
</div>
<div style={this.style1} className="col-xl-4 col-lg-8">
<div className="col-md-12" style={this.style2}>
<Section_2 />
</div>
</div>
<div style={this.style1} className="col-xl-8 col-lg-8" ref="inner">
<div className="col-md-12" style={this.style2}>
<Section_3 />
</div>
</div>
<div style={this.style1} className="col-xl-12 col-lg-12">
<div className="col-md-12" style={this.style2}>
<App />
</div>
</div>
</div>
<div className="column col-xl-3 col-lg-3 col-md-12 col-sm-12 ">
<div style={this.style1} className="col-xl-12 col-lg-12 my-auto">
<div className="col-md-12" style={this.style2}>
<Section_5 />
</div>
</div>
<div style={this.style1} className="col-xl-12 col-lg-12">
<div className="col-md-12" style={this.style2}>
<Section_test />
</div>
</div>
</div>
</div>
);
}
}
export default main;
Now in the header you don't need the state as you can use the 'fullscreenstate' prop and in the toggle function in the header change so it wil caontain the call of the toggle function of the 'main' component. something like this:
class Header_Top extends Component {
toggleFullScreen = () => {
this.props.toggleFullScreen
};
Don't copy-paste what I've done as there might be syntax error as I've been using functional components in the last few months.

ReactJs render additional component after submit form right under the form

I have a problem displaying the component after inputting data into a form.
So far I have managed to get the submitted data and have gotten json's response using axios.
The obstacle after successfully obtaining the data, I am confused to call the additional components that I want to display under the form.
import React, { Component } from 'react'
import axios from 'axios'
import ListSchedule from './Sections/ListSchedule'
export default class FindShipmentSchedule extends Component {
constructor(props) {
super(props)
this.state = {
origin_unloc: '',
destination_unloc: '',
list_schedule: []
}
}
changeHandler = e => {
this.setState({
[e.target.name]: e.target.value,
})
}
submitHandler = e => {
e.preventDefault();
// console.log(this.state)
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
axios
.post('url-api-here', this.state, {
headers: headers
})
.then(response => {
console.log(response)
this.setState({list_schedule:response})
})
.catch(error => {
console.log(error)
})
}
render() {
const { origin_unloc, destination_unloc } = this.state
return (
<div>
{/* Content Wrapper. Contains page content */}
<div className="content-wrapper">
{/* Content Header (Page header) */}
<div className="content-header">
<div className="container-fluid">
<div className="row mb-2">
<div className="col-sm-6">
<h1 className="m-0 text-dark">Find Shipping Schedule</h1>
</div>{/* /.col */}
<div className="col-sm-6">
<ol className="breadcrumb float-sm-right">
<li className="breadcrumb-item">Home</li>
<li className="breadcrumb-item active">Find Shipping Schedule</li>
</ol>
</div>{/* /.col */}
</div>{/* /.row */}
</div>{/* /.container-fluid */}
</div>
{/* /.content-header */}
<div className="content">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<form onSubmit={this.submitHandler}>
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-4">
<div className="form-group">
<label>Port of Loading</label>
<input
className="form-control"
name="origin_unloc"
value={origin_unloc}
onChange={this.changeHandler}/>
</div>
</div>
<div className="col-md-4">
<div className="form-group">
<label>Port of Destination</label>
<input
className="form-control"
name="destination_unloc"
value={destination_unloc}
onChange={this.changeHandler}/>
</div>
</div>
<div className="col-md-4">
<div className="form-group">
<button type="submit" style={{marginTop: 30}} className="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{/* /.content-wrapper */}
</div>
)
}
}
and my ListSchedule.js
import React, { Component } from 'react'
class ListSchedule extends Component {
render() {
const { origin_unloc, destination_unloc } = this.state
return (
<div>
{/* Main content */}
<div className="content">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-header border-0">
<h3 className="card-title">Schedule List</h3>
</div>
<div className="card-body table-responsive p-0">
<table className="table table-striped table-valign-middle">
<thead>
<tr>
<th>Ship Name</th>
<th>Agent Name</th>
<th>Service</th>
<th>Voyage Number</th>
<th>Imo</th>
<th>Departure</th>
<th>Arrival</th>
<th>Origin</th>
<th>Destination</th>
<th>Total Duration</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Wan Hai 512</td>
<td>CMA CGM</td>
<td>CSN1MA</td>
<td>0QY0GN1MA</td>
<td>Wan Hai 512</td>
<td>CMA CGM</td>
<td>CSN1MA</td>
<td>0QY0GN1MA</td>
<td>Wan Hai 512</td>
<td>CMA CGM</td>
<td>CSN1MA</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* /.card */}
</div>
</div>
{/* /.row */}
</div>
{/* /.container-fluid */}
</div>
{/* /.content */}
</div>
)
}
}
export default ListSchedule