We Keep Coding

How to set retrived checkbox value checked and others unchecked?

I have some posts in my database I'm trying to retrieve and edit posts. The posts had some categories which I set as a checkbox. Well, I've retrieved a single post by id successfully but the problem is I also retrieved the categories and I want to show them as checked not all of them only those ones which are set for that particular post. I have another problem I cannot check the box anymore and am not able to add another category to the category list. Help me!
Here is the Edit Post page
import React, { useEffect, useState } from 'react';
import { Alert, Button, Card, Container, Form } from 'react-bootstrap';
import ReactMarkdown from 'react-markdown';
import { useDispatch, useSelector } from 'react-redux';
import { toast, ToastContainer } from 'react-toastify';
import { listCategory } from '../actions/categoryActions';
import { listPostDetails, updatePost } from '../actions/postActions';
const EditPost = ({ history, match }) => {
const postId = match.params.id;
const [categories, setCategories] = useState([]);
const dispatch = useDispatch();
const categoryList = useSelector((state) => state.categoryList);
const { categories: cateList } = categoryList;
const postDetails = useSelector((state) => state.postDetails);
const { post } = postDetails;
useEffect(() => {
if (!userInfo) {
history.push('/login');
}
dispatch(listCategory());
if (!post || post._id !== postId) {
dispatch(listPostDetails(postId));
} else {
setCategories(post.categories);
}
}, [dispatch, history, userInfo, post, postId, categories]);
const submitHandler = (e) => {
e.preventDefault();
dispatch(updatePost(title, desc, img, categories));
history.push('/my_posts');
};
return (
<div className=" createPost mt-4 py-4">
<ToastContainer />
<Container>
<h2>EDIT POST</h2>
<Form onSubmit={submitHandler}>
<Form.Group controlId="category" className="mb-2">
<Form.Label>Select Categories</Form.Label>
<br />
{cateList?.map((cate) => (
<Form.Check
inline
key={cate._id}
type="checkbox"
label={cate.name}
onChange={(e) => {
if (e.target.checked) {
setCategories([...categories, cate.name]);
} else {
setCategories(
categories?.filter((cat) => cat !== cate.name)
);
}
}}
/>
))}
</Form.Group>
<Button
type="submit"
variant="success"
style={{ letterSpacing: '2px', fontWeight: 'bold' }}>
CREATE
</Button>
</Form>
</Container>
</div>
);
};
export default EditPost;

How to pass data between to independent component on button click in React JS?

I am trying to pass the data from my card Component to User Component on a button click.
Both are independent components.
In card component I and fetching data from an API. Now when I click on any User Info Button I want to go on the User Page and want to display its data.
I did try it using react-redux. But I got all elements on the user page. I need only one user on which profile I clicked.
Is there any way to solve this issue with or without redux?
Card.js
import React, { useEffect,useState } from 'react'
import axios from 'axios'
import { NavLink } from 'react-router-dom'
import User from './User'
import { useStateValue } from './Stateprovider'
const Card = ({id,name,Image},props) => {
const [posts, setposts] = useState([])
useEffect(() => {
axios.get('https://s3-ap-southeast-1.amazonaws.com/he-public-data/users49b8675.json')
.then(res =>{
console.log(res);
setposts(res.data)
})
.catch(err =>{
console.log(err);
})
},[])
const [filter,setfilter] = useState('');
const searchText = (event) =>{
setfilter(event.target.value);
}
let dataSearch = posts.filter(item =>{
return Object.keys(item).some(key =>
item[key].toString().toLowerCase().includes(filter.toString().toLowerCase()))
})
function sendData(){
<User id={id} name={name} />
}
return (
<>
<div className="card-area">
{
dataSearch.map((item) => {
let {id,name,Image}=item
return (
<>
<div key="id" className="card">
<img src={Image} alt="" />
<div className="card-data">
<h3><span>User Id: </span>{id}</h3>
<h2><span>Name: </span>{name}</h2>
</div>
<NavLink className="button" exact to={`/${item.id}`} onClick={()=>sendData()}> User Info </NavLink>
</div>
</>
)} )
}
</div>
</>
)
}
export default Card;
User.js
import React, { useState } from 'react'
import { NavLink } from 'react-router-dom';
import { useEffect } from 'react/cjs/react.development';
import Card from './Card';
import { useStateValue } from './Stateprovider';
const User = (props) => {
return (
<>
<div key="id" className="card">
<img src={props.Image} alt="" />
<div className="card-data">
<h3><span>User Id: </span>{props.id}</h3>
<h2><span>Name: </span>{props.name}</h2>
</div>
<NavLink className="button" exact to='/home' > User Info </NavLink>
</div>
</>
)
}
export default User;

I am assuming you have a route for displaying the user info, in that case you can use Link component from react-router to redirect the user to a new page with a predefined state
<Link
to={{
pathname: "/userinfo",
state: { userinfo: {
id: "some id",
name: "some name"
}}
}}
/>
and you can access the state in the userinfo component using props.location.state.userinfo.
also take a look at this thread How do I pass state through React_router? and https://v5.reactrouter.com/web/api/Link

You need to pass props to the component to have access to it
React component and props

Can't remove the value and uncheck the item of checkbox?

Maybe the question is a little bit confusing because I'm confused. The problem I have listed categories in the database I fetched it and create a post. Now I'm trying to edit the post. The categories are in checkbox format if check it adds the setCategories state if uncheck it will remove from the state. I have fetched the post and saved categories for that particular post. I've shown them checked. Now I'm trying to change the categories I've added. I'm successful to add more but cannot remove it as well am unable to uncheck the checkbox. Please check this code...
I'm highlighted the onChange part with dashes
here is code
import React, { useEffect, useState } from 'react';
import { Alert, Button, Card, Container, Form } from 'react-bootstrap';
import ReactMarkdown from 'react-markdown';
import { useDispatch, useSelector } from 'react-redux';
import { toast, ToastContainer } from 'react-toastify';
import { listCategory } from '../actions/categoryActions';
import { listPostDetails, updatePost } from '../actions/postActions';
const EditPost = ({ history, match }) => {
const postId = match.params.id;
const [categories, setCategories] = useState([]);
const dispatch = useDispatch();
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
const categoryList = useSelector((state) => state.categoryList);
const { categories: cateList } = categoryList;
useEffect(() => {
if (!userInfo) {
history.push('/login');
}
if (!post || post._id !== postId) {
dispatch(listPostDetails(postId));
} else {
setCategories(post.categories);
console.log(categories);
}
dispatch(listCategory());
}, [dispatch, history, userInfo, post, postId, categories]);
const resetHandler = () => {
setTitle('');
setImg('');
setCategories('');
setDesc('');
};
const submitHandler = (e) => {
e.preventDefault();
dispatch(updatePost(postId, title, desc, img, categories));
resetHandler();
history.push('/my_posts');
};
return (
<div className=" createPost mt-4 py-4">
<ToastContainer />
<Container>
<h2>EDIT POST</h2>
<Form onSubmit={submitHandler}>
<Form.Group controlId="category" className="mb-2">
<Form.Label>Select Categories</Form.Label>
<br />
{cateList?.map((cate) => (
<Form.Check
inline
key={cate._id}
type="checkbox"
label={cate.name}
checked={categories.includes(cate.name)}
------------------------------------------------------------------------------------------
onChange={(e) => {
if (e.target.checked) {
setCategories([categories.push(cate.name)]);
} else {
setCategories(
categories?.filter((cat) => cat !== cate.name)
);
}
}}
-------------------------------------------------------------------------------------------
/>
))}
</Form.Group>
<Button
type="submit"
variant="success"
style={{ letterSpacing: '2px', fontWeight: 'bold' }}>
UPDATE
</Button>
</Form>
</Container>
</div>
);
};
export default EditPost;

I think the problem is on useEffect method you are console.log(categories) it keeps on refreshing the state and not allowing you to add or remove items. first remove the console.log(categories) and also categories dependencies from useEffect and use this setCategories([...categories, cate.name]); instead of this setCategories([categories.push(cate.name)]);. You shouldn't change categories directly

You shouldn't change categories directly. So, instead of
setCategories([categories.push(cate.name)]);
try
setCategories([...categories, cate.name]);

Can I fix the issue when I call an api, it called two times with reactjs?

I used redux-saga and I want when I click on my button, the api will be fetching,
My code is:
// #flow
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Row, Col, Card, CardBody, Button, ButtonDropdown, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { Translate } from 'src/components';
import { VCS } from 'src/common';
import { ACCESS_LEVELS, USER_RIGHTS, userAccess } from 'src/constants/user-rights';
import * as Actions from './actions';
import ClientUsersRSuiteTable from './components/client-users-rsuite-table';
import './users.scss';
function Users({ clientId, clientUsers, requestClientUsersData, getUserTemplate, pageParameters, ...props }) {
const [searchValue, setSearchValue] = useState('');
useEffect(() => {
requestClientUsersData({ id: clientId, pageParams: null });
}, []);
const handleChangeSearchValue = (input) => {
const search = input != '' ? input : null;
setSearchValue(search);
};
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return (
<>
<VCS hasRights={[userAccess(ACCESS_LEVELS.EDIT, USER_RIGHTS.API_CLIENTS)]}>
<div className="row">
<div className="col">
<Button
style={{ backgroundColor: '#ffffff !important', color: '#fa5c7c !important' }}
outline
color="danger"
className="mb-2 mr-1 btn-user-template"
onClick={() => getUserTemplate(clientId)}
>
<i className="mdi mdi-file-outline mr-1" size="large" />
<Translate id="pages.client.users.get.user.template" />
</Button>
</div>
</div>
</div>
</VCS>
</>
);
}
Users.defaultProps = {
};
const mapStateToProps = (state) => ({
clientUsers: state.Administration.users.clientUsers ? state.Administration.users.clientUsers :
state.Administration.clients.clientUsers,
pageParameters: state.Administration.users.clientUsersPageParameters ? state.Administration.users.clientUsersPageParameters :
state.Administration.clients.clientUsersPageParameters
});
export default connect(mapStateToProps, Actions)(Users);
My api is:
export const getUserTemplate = async (clientId) => request(`api/clients/${clientId}/users/import/template`, 'GET');
When I click on the button, my api is called two times with same response !
The Api is to export excel data, when I run it, I get :
I want when I run it on clicking the button, I get just one file not two(because it runs two time)
How can I fix it ?

How to assign value onClick from different component to another component in React

What i want to do :
When i click my button i.e Search in Navbar.js i want to assign the search text in the variable urlQuery so i can pass it as props in Episodes.js component
End goal is to pass the urlQuery from Navbar.js somehow to Episodes.js component so i can query the REST api
How do i achieve the desired behaviour pls help
App.js
import React, { useState } from 'react';
import './App.css'
import Episodes from './components/Episodes/Episodes'
import CustomNavbar from './components/Navbar/Navbar'
import Pagination from './components/Pagination/Pagination'
function App() {
const [postsPerPage] = useState(20);
const [currentPage, setCurrentPage] = useState(1);
const url=`https://rickandmortyapi.com/api/episode?page=${currentPage}`
let urlQuery = `https://rickandmortyapi.com/api/episode?name=${SEARCH TEXT HERE}`
const paginate = pageNumber => setCurrentPage(pageNumber);
return (
<div>
<CustomNavbar />
<Episodes
urlQuery={urlQuery}
url={url}
/>
<Pagination
postsPerPage={postsPerPage}
totalPosts={36}
paginate={paginate}
/>
</div>
);
}
export default App;
Navbar.js
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormControl from 'react-bootstrap/FormControl';
const customNavbar = () => {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Rick And Morty</Navbar.Brand>
<Form inline>
<FormControl type="text" placeholder="Search" />
<Button>Search</Button>
</Form>
</Navbar>
);
}
export default customNavbar
Edit
On Zohaib's suggestion this error is thrown
Failed to compile.
./src/components/Navbar/Navbar.js
Line 14:48: Unexpected use of 'event' no-restricted-globals
Search for the keywords to learn more about each error.

App.js
import React, { useState, useEffect } from 'react';
import './App.css'
import Episodes from './components/Episodes/Episodes'
import CustomNavbar from './components/Navbar/Navbar'
import Pagination from './components/Pagination/Pagination'
function App() {
const [postsPerPage] = useState(20);
const [currentPage, setCurrentPage] = useState(1);
const [userSearchValue, setUserSearchValue] = useState('');
const [url, setUrl] = useState(``);
const [urlQuery, setUrlQuery] = useState(``)
useEffect(() => {
setUrl(`https://rickandmortyapi.com/api/episode?page=${currentPage}`)
}, [currentPage]);
useEffect(() => {
setUrlQuery(`https://rickandmortyapi.com/api/episode?name=${userSearchValue}`)
}, [userSearchValue])
const paginate = pageNumber => setCurrentPage(pageNumber);
const handleButtonClick = (searchValue) => {
setUserSearchValue(searchValue);
}
return (
<div>
<CustomNavbar
onButtonClick={handleButtonClick}
/>
<Episodes
urlQuery={urlQuery}
url={url}
/>
<Pagination
postsPerPage={postsPerPage}
totalPosts={36}
paginate={paginate}
/>
</div>
);
}
export default App;
Navbar.js
import React, { useState } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormControl from 'react-bootstrap/FormControl';
const customNavbar = ({ onButtonClick }) => {
const [searchValue, setSearchValue] = useState('');
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Rick And Morty</Navbar.Brand>
<Form inline>
<FormControl type="text" placeholder="Search" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
<Button onClick={() => onButtonClick(searchValue)}>Search</Button>
</Form>
</Navbar>
);
}
export default customNavbar
The important part here is you're passing down the handleButtonClick function to the child component (Navbar). This way you can call that parent function in the child component whenever you want (ie. when the user clicks the submit button).

Do you mean something like this?

There is a React guide about this specific problem: Lifting State Up.
Normally what you do is you manage the state in the parent. In this case App where you manage the search text state. You pass down a function to components to change this state. The components that depend upon this state are passed the value through the properties.
Here is an example:
const {useEffect, useState} = React;
function App() {
const episodesURL = "https://rickandmortyapi.com/api/episode";
const [page, setPage] = useState(1);
const [pageInfo, setPageInfo] = useState({});
const [searchText, setSearchText] = useState("");
const [episodes, setEpisodes] = useState([]);
useEffect(() => {
const url = new URL(episodesURL);
url.searchParams.set("page", page);
if (searchText) url.searchParams.set("name", searchText);
fetch(url)
.then(response => response.json())
.then(response => {
if (response.error) {
setPageInfo({});
setEpisodes([]);
} else {
setPageInfo(response.info);
setEpisodes(response.results);
}
});
}, [page, searchText]);
const search = searchText => {
setSearchText(searchText);
setPage(1);
};
return (
<div>
<CustomNavbar search={search} />
<Episodes episodes={episodes} />
<Pagination setPage={setPage} info={pageInfo} />
</div>
);
}
function CustomNavbar({search}) {
const [searchText, setSearchText] = useState("");
const handleFormSubmit = event => {
event.preventDefault();
search(searchText);
};
return (
<form onSubmit={handleFormSubmit}>
<input
type="text"
placeholder="search"
value={searchText}
onChange={event => setSearchText(event.target.value)}
/>
<button type="submit">Search</button>
</form>
);
}
function Episodes({episodes}) {
return (
<table>
<thead>
<tr>
<th>episode</th>
<th>name</th>
<th>air date</th>
</tr>
</thead>
<tbody>
{episodes.map(episode => (
<tr key={episode.id}>
<td>{episode.episode}</td>
<td>{episode.name}</td>
<td>{episode.air_date}</td>
</tr>
))}
</tbody>
</table>
);
}
function Pagination({setPage, info}) {
return (
<div>
{info.prev && <a onClick={() => setPage(page => page - 1)}>previous</a>}
{info.next && <a onClick={() => setPage(page => page + 1)}>next</a>}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
th { text-align: left; }
a { cursor: pointer; }
<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>
<div id="root"></div>

Change urlQuery to state variable. Then, pass setUrlQuery to NavBar as a prop and on search button clickEvent call setUrlQuery function.