We Keep Coding

Problem while passing useState variable from one JSX file to another

(CreateColumn.jsx)
import React, { useState, useEffect } from "react";
import Axios from "axios";
import "./styles.css";
function CreateColumn() {
let [val1, setVal1] = useState("0");
let [val2, setVal2] = useState("0");
let [secName, setSecName] = useState("");
let [goAttendance, setGoAttendance] = useState(0);
function valueChanged(event) {
const checkChecked = event.target.id;
// console.log(checkChecked);
if (checkChecked === "section1") {
setVal1("1");
setVal2("0");
setSecName("Section 1");
} else if (checkChecked === "section2") {
setVal2("1");
setVal1("0");
setSecName("Section 2");
} else {
setVal1("0");
setVal2("0");
setSecName("");
}
}
useEffect(() => {
Axios.get("http://localhost:9000/createColumn").then((response) => {
setSecName(response.data);
});
}, []);
function sendColumn(event) {
setGoAttendance(1);
Axios.post("http://localhost:9000/createColumn", { secName, goAttendance });
}
return (
<div>
<form className="form-body">
<div className="form-check check-line center-col">
<input
className="form-check-input"
type="checkbox"
id="section1"
name="section"
value={val1}
checked={val1 === "1"}
onChange={valueChanged}
/>
</div>
<div className="form-check check-line center-col">
<input
className="form-check-input"
type="checkbox"
id="section2"
name="section"
value={val2}
checked={val2 === "1"}
onChange={valueChanged}
/>
</div>
<div className="submit-btn d-grid gap-2 d-md-flex justify-content-md-center">
<button
type="submit"
className="btn btn-lg btn-primary"
onClick={sendColumn}
>
Create
</button>
</div>
</form>
</div>
);
}
export default CreateColumn;
(Attendance.jsx)
import React, { useState, useEffect } from "react";
import Axios from "axios";
import TableTitle from "./TableTitle";
import Pagination from "./Pagination";
import "./styles.css";
function Attendance() {
const [attedanceList, setAttedanceList] = useState([]);
useEffect(() => {
Axios.get("http://localhost:9000/attendance/" + ****WANT TO USE secName FROM CreateColumn.jsx HERE****).then(
(response) => {
setAttedanceList(response.data.data.values);
}
);
}, []);
function sendAllValues(event) {
Axios.post("http://localhost:9000/attendance", { attedanceList });
}
return (
<form className="form-body">
<TableTitle />
<Pagination data={attedanceList} />
<div className="submit-btn d-grid gap-2 d-md-flex justify-content-md-center">
<button
type="submit"
className="btn btn-lg btn-primary"
onClick={sendAllValues}
>
Submit
</button>
</div>
</form>
);
}
export default Attendance;
(App.jsx)
import React, { useState } from "react";
import Attendance from "./Attendance";
import CreateColumn from "./CreateColumn";
function App() {
return (
<div>
<CreateColumn />
**WANT TO USE goAttendance FROM CreateColumn.jsx HERE** && <Attendance />
</div>
);
}
export default App;
I wanna use useState variables (secName and goAttendance) from Column.jsx in Attendance.jsx and App.jsx (where I have marked as WANT TO USE...). How is it possible?
More precisely, I wanna use secName from Column.jsx into Attendance.jsx.
Also, I wanna use goAttendance from Column.jsx into App.jsx
I tried so many things for hours but sometimes it breaks my code or simply have to change a lot which makes the code more messy and buggy.

As I can see CreateColumn and Attendence are the child components of App. You want to create a state and use it in app where as you want to set it in its child component. What I will suggest is to create the state and setState function on app level and then pass the state and setState function as props in the child component. I will suggest you to see this to know more about props.
in app.jsx
let [val1, setVal1] = useState("0");
let [val2, setVal2] = useState("0");
let [secName, setSecName] = useState("");
let [goAttendance, setGoAttendance] = useState(0);
const [attedanceList, setAttedanceList] = useState([]);
// while calling the components
return(
<>
<CreateColumn val1={val1}, val2={val2}, secName={secName}, ....../>
<Attendance val1={val1}, val2={val2}, secName={secName}, ....../>
</>
)
in CreateColumn and Attendence while declaring the components write
function Attendance({val1, val2, secName, setVal1, ...})
and then use the states and setStates in app.jsx

React conditional styling in a map function problem

I just want to show toggled item. But all map items showing up. Basically this is the result I'm getting from onclick. I think i need to give index or id to each item but i don't know how to do it. i gave id to each question didn't work.
App.js.
import "./App.css";
import React, { useState, useEffect } from "react";
import bg from "./images/bg-pattern-desktop.svg";
import bg1 from "./images/illustration-box-desktop.svg";
import bg2 from "./images/illustration-woman-online-desktop.svg";
import { data } from "./data";
import Faq from "./Faq";
function App() {
const [db, setDb] = useState(data);
const [toggle, setToggle] = useState(false);
useEffect(() => {
console.log(db);
}, []);
return (
<>
<div className="container">
<div className="container-md">
<div className="faq">
<img src={bg} className="bg" />
<img src={bg1} className="bg1" />
<img src={bg2} className="bg2" />
<div className="card">
<h1>FAQ</h1>
<div className="info">
{db.map((dat) => (
<Faq
toggle={toggle}
setToggle={setToggle}
title={dat.title}
desc={dat.desc}
key={dat.id}
id={dat.id}
/>
))}
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default App;
(map coming from simple data.js file that I created. it includes just id title desc.)
Faq.js
import React from "react";
import arrow from "./images/icon-arrow-down.svg";
const Faq = ({ toggle, setToggle, title, desc, id }) => {
return (
<>
{" "}
<div className="question" onClick={() => setToggle(!toggle)}>
<p>{title}</p>
<img src={arrow} className={toggle ? "ikon aktif" : "ikon"} />
</div>
<p className="answer border">{toggle ? <>{desc}</> : ""}</p>
</>
);
};
export default Faq;

You need to store the index value of the toggle item.
You can modify the code with only 2 lines with the existing codebase.
import "./App.css";
import React, { useState, useEffect } from "react";
import bg from "./images/bg-pattern-desktop.svg";
import bg1 from "./images/illustration-box-desktop.svg";
import bg2 from "./images/illustration-woman-online-desktop.svg";
import { data } from "./data";
import Faq from "./Faq";
function App() {
const [db, setDb] = useState(data);
const [toggle, setToggle] = useState(-1); //Modify Here
useEffect(() => {
console.log(db);
}, []);
return (
<>
<div className="container">
<div className="container-md">
<div className="faq">
<img src={bg} className="bg" />
<img src={bg1} className="bg1" />
<img src={bg2} className="bg2" />
<div className="card">
<h1>FAQ</h1>
<div className="info">
{db.map((dat, index) => ( //Modify Here
<Faq
toggle={index === toggle} //Modify Here
setToggle={() => setToggle(index)} //Modify Here
title={dat.title}
desc={dat.desc}
key={dat.id}
id={dat.id}
/>
))}
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default App;
import React from "react";
import arrow from "./images/icon-arrow-down.svg";
const Faq = ({ toggle, setToggle, title, desc, id }) => {
return (
<>
{" "}
<div className="question" onClick={setToggle}>
<p>{title}</p>
<img src={arrow} className={toggle ? "ikon aktif" : "ikon"} />
</div>
<p className="answer border">{toggle ? <>{desc}</> : ""}</p>
</>
);
};
export default Faq;

You will need state for each toggle. Here is a minimal verifiable example. Run the code below and click ⭕️ to toggle an item open. Click ❌ to close it.
function App({ faq = [] }) {
const [toggles, setToggles] = React.useState({})
const getToggle = key =>
Boolean(toggles[key])
const setToggle = key => event =>
setToggles({...toggles, [key]: !getToggle(key) })
return faq.map((props, key) =>
<Faq key={key} {...props} open={getToggle(key)} toggle={setToggle(key)} />
)
}
function Faq({ question, answer, open, toggle }) {
return <div>
<p>
{question}
<button onClick={toggle} children={open ? "❌" : "⭕️"} />
</p>
{open && <p>{answer}</p>}
</div>
}
const faq = [
{question: "hello", answer: "world"},
{question: "eat", answer: "vegetables"}
]
ReactDOM.render(<App faq={faq} />, document.querySelector("#app"))
p { border: 1px solid gray; padding: 0.5rem; }
p ~ p { margin-top: -1rem; }
button { float: right; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Instead of doing this (in App component):
const [db, setDb] = useState(data);
const [toggle, setToggle] = useState(false);
you can write an useState hook like below to combine the two hooks and assign an isOpened property for each Faq element:
const [db, setDb] = useState(data.map(value=>{return {...value, isOpened:false}}));
and then right here you can do this (as the child of <div className="info">):
{db.map((dat, index) => (
<Faq
toggle={dat.isOpened}
setToggle={() => toggleById(dat.id)}
title={dat.title}
desc={dat.desc}
key={dat.id}
id={dat.id}
/>
))}
Also you need to declare toggleById function in App component:
const toggleById = (id) => {
const newDb = db.map(dat=>{
if(dat.id==id){
return {...dat,isOpened:!dat.isOpened}
}
return dat;
});
setDb(newDb);
}
and since setToggle prop of Faq, calls toggleById by its defined parameter, there is no need to do this in Faq component:
<div className="question" onClick={() => setToggle(!toggle)}>
you can simply write:
<div className="question" onClick={setToggle}>

How do I scroll into a item in a list by search operation using react?

So, I made a react app that displays a list of items from a json file as in the pic.
I want to implement a search feature where i can enter the name and it checks for the name in list and scrolls to it.
A person told me about scroll-into-view , but I'm not understand how to make it compare the search term to the names in list.
My App.js code
import React,{useState} from 'react';
import Notes from './Notes';
import './App.css';
function App() {
const [notes] = useState([]);
const handleSubmit= ()=>{
//Upon submitting I want the search functionality to be implemented here . If thats the way to do it.
}
return (
<div className="App">
<div className="App-header">
<form><input type="text" placeholder="Start Typing.." onSubmit={handleSubmit} ></input></form>
<div className="pageTitle">Song Notes :</div>
<Notes thisNotes={notes}/>
</div>
</div>
);
}
export default App;
My Notes.js code:
import React from 'react';
const Notes = ({notes})=>{
const jsonNotes = require('./Notes.json');
const songNotes = jsonNotes.map(note => {
return(
<div key={note.id}>
<li class="noteAsList">
<div className="songTitle">{note.Name}</div>
<pre><br></br>{note.Notes}</pre>
</li>
</div>
)
})
return(
<div className="noteStyle">
{songNotes}
</div>
)
}
export default Notes;
I'm looking to implement such a feature. Either scrolling into view in the page or just displaying the item I asked for.
Thanks for the help in advance.

Codesandbox
My App.js code
import React, { useState } from "react";
import Notes from "./Notes";
import "./App.css";
const jsonNotes = require("./Notes.json");
const App = () => {
const [notes] = useState([]);
const handleSubmit = event => {
if (event.key === "Enter") {
console.log(event.target.value);
const obj = jsonNotes.find(item => item.Name === event.target.value);
const el = document.getElementById(obj.id);
if (el)
el.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "center"
});
}
};
return (
<div className="App">
<div className="App-header">
<input
type="text"
placeholder="Start Typing.."
onKeyPress={handleSubmit}
/>
<div className="pageTitle">Song Notes :</div>
<Notes thisNotes={notes} />
</div>
</div>
);
};
export default App;
My Notes.js code:
import React from "react";
const jsonNotes = require("./Notes.json");
const Notes = ({ notes }) => {
const songNotes = jsonNotes.map(note => {
return (
<div id={note.id} key={note.id}>
<li className="noteAsList">
<div className="songTitle">{note.Name}</div>
<pre>
<br />
{note.Notes}
</pre>
</li>
</div>
);
});
return <div className="noteStyle">{songNotes}</div>;
};
export default Notes;

Update state between different Components on ReactJS

I am trying to update the state from an other component to an other component.
I want on header.jsx the state total to be updated when i click on add to cart button on product.jsx
Here is my code
index.jsx
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './header';
import Footer from './footer';
import Posts from './posts';
import Post from './post';
import Products from './products';
import Product from './product';
import Page from './page';
// Load the Sass file
require('./style.scss');
const App = () => (
<div id="page-inner">
<Header />
<main id="content">
<Switch>
<Route exact path={Settings.path + 'products/:product'} component={Product} />
</Switch>
</main>
<Footer />
</div>
);
// Routes
const routes = (
<Router>
<Route path="/" component={App} />
</Router>
);
render(
(routes), document.getElementById('page')
);
header.jsx
import React from "react";
import { Link } from "react-router-dom";
class Header extends React.Component {
constructor(props) {
super(props);
this.state = { products: [], total: 0 }
var total = 0;
this.cartUpdated = this.cartUpdated.bind(this)
}
componentDidMount() {
//let cart = localStorage.getItem('total');
// this.setState({ total: 100 });
}
cartUpdated()
{
this.setState({ total: cart+100 });
}
render() {
return (
<div className="cart-icon p-3 m-auto">
Cart/ Total: <span className=""><span className="cart">€</span>{this.state.total}</span><i className="fas fa-shopping-cart" />
</div>
);
}
}
export default Header;
product.jsx
import React from "react";
import NotFound from "./not-found";
import "react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
class Product extends React.Component {
constructor(props) {
super(props);
this.state = { product: {}, total: 0
};
// ACTIONS
// addToCart
this.addToCart = this.addToCart.bind(this);
}
addToCart()
{
this.props.cartUpdated;
/*
let total = localStorage.getItem('total')
? JSON.parse(localStorage.getItem('total')) : {};
localStorage.setItem('total', 100); */
}
componentDidMount() {
this.fetchData();
}
fetchData = () => {
.......
};
renderProduct() {
if (this.state.product.images) {
const images = [];
if (this.state.product) {
this.state.product.images.map((image, i) => {
var new_image = {"original":image, "thumbnail":image} ;
images.push(new_image);
});
}
return (
<div className="col-md-12">
<div className="row">
<div className="col-md-6">
<ImageGallery items={images} showPlayButton={false} showFullscreenButton={false} thumbnailPosition="left" />
</div>
<div className="col-md-6">
<h4 className="card-title">{this.state.product.name}</h4>
<p className="card-text">
<strike>${this.state.product.regular_price}</strike>{" "}
<u>${this.state.product.sale_price}</u>
</p>
<p className="card-text">
<small className="text-muted">
{this.state.product.stock_quantity} in stock
</small>
</p>
<p
className="card-text"
dangerouslySetInnerHTML={{
__html: this.state.product.description
}}
/>
<div className="superflex add_to_cart_wrapper">
<button type="submit" name="add-to-cart" value={93} className="add_to_cart btn btn-success alt" onClick={this.props.cartUpdated}>Add to cart</button>
</div>
</div>
</div>
</div>
);
}
}
renderEmpty() {
return <NotFound />;
}
render() {
return (
<div className="container post-entry">
{this.state.product ? this.renderProduct() : this.renderEmpty()}
</div>
);
}
}
export default Product;

You can do something like this to achieve this. But the more clean solution which is suggested by the React JS is to use the React Context API.
Am sharing a link from the React JS documentation which exactly have the same scenario that you want to tackle.
https://reactjs.org/docs/context.html#updating-context-from-a-nested-component
And also since you are using the React pure component function so we can use the React hooks, you can have a look here at
https://reactjs.org/docs/hooks-reference.html#usestate
so in your code it should be like this
./Total-Context.js
export const TotalContext = React.createContext({
total: 0,
setTotal: () => {
},
});
./index.jsx
import { TotalContext } from './Total-Context';
const App = () => {
const [total, setTotal] = useState(0);
return (
<TotalContext.Provider value={{total, setTotal}}>
<div id="page-inner">
<Header currentTotal={total} />
<main id="content">
<Switch>
<Route
exact
path={`${Settings.path}products/:product`}
component={Product}
/>
</Switch>
</main>
<Footer />
</div>
</TotalContext.Provider>
);
};
and Now we can use the TotalContext consumer in the Product component and call the method to set the total method in the global context like this.
./Product.jsx
import { TotalContext } from './Total-Context';
const Product = () => (
<TotalContext.Consumer>
{({total, setTotal}) => (
<button
onClick={() => {setTotal(newTotal)}}
>
Update total
</button>
)}
</TotalContext.Consumer>
)
so after calling the click method the Header component should have the updated value of the total.

you can use redux to manage state across multiple components.
getting started with redux

To Answer this:
There is no way by the help of which you can pass state between two react components, as state is private to a component.
props can help you in this regard. Props also can't be passed from child to parent it can always be from parent to child.
There is a twist by the help of which you can achieve this, please follow the below article section: "How to pass Props from child to parent Component?" to get clear idea on this:
URL: https://www.robinwieruch.de/react-pass-props-to-component/

Clear Textfield material-ui ReactJS

I have two text fields and a button using Material-UI, what I want to achieve is to clear the contents of the text fields when I click the button but I don't know how to do it, I'm new to React-JS.
This is the code I have:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
export default class CreateLinksave extends React.Component {
render() {
return (
<div clssName="container">
<div>
<TextField floatingLabelText="Receipt Desc" />
</div>
<div>
<TextField floatingLabelText="Triggers Required" />
</div>
<RaisedButton label="Clear" />
</div>
);
}
};
Can someone please help me on this?

the text should be handled by the state
therefore you must only edit the state of the component so that your changes are shown
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
export default class CreateLinksave extends React.Component {
constructor(props){
super(props);
// initial state
this.state = this.getDefaultState();
}
getDefaultState = () => {
return { text1: '', text2: '' };
}
clear = () => {
// return the initial state
this.setState(this.getDefaultState())
}
render() {
return (
<div className="container">
<div>
<TextField
value={this.state.text1}
onChange={(e)=>{this.setState({text1: e.target.value})}}
floatingLabelText="Receipt Desc"
/>
</div>
<div>
<TextField
onChange={(e)=>{this.setState({text2: e.target.value})}}
value={this.state.text2}
floatingLabelText="Triggers Required"
/>
</div>
// use the clear function
<RaisedButton label="Clear" onClick={this.clear}/>
</div>
);
}
}

If anyone has the same issue with the functional components in React, then you have to handle the value of the Textfield component with a state.
Doesn't matter whether you use Formik library or not.
Simple control the value property of the text field using a state variable.
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
const sampleTextControl = () => {
const [value, setValue] = useState(''); //Initial value should be empty
const handleSubmit = (e)=> {
alert('The value: ' + value);
setValue(''); //To reset the textfield value
e.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<Textfield id="standard-basic" value={value} onChange={(e)=>setValue(e.target.value)}/>
<Button variant="contained" type="submit" value="Submit">
Submit
</Button>
</form >
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

If you don't want to manage state for every text field then you should use refs:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
export default class CreateLinksave extends React.Component {
constructor(props) {
super(props);
this.receiptRef = React.createRef('');
this.triggersRef = React.createRef('');
}
handleClick = () => {
this.receiptRef.current.value = null;
this.triggersRef.current.value = null;
}
render() {
return (
<div clssName="container">
<div>
<TextField floatingLabelText="Receipt Desc" />
</div>
<div>
<TextField floatingLabelText="Triggers Required" />
</div>
<RaisedButton label="Clear" onClick={this.handleClick}/>
</div>
);
}
};