Develop Reference

How to create "Selected tab" in Next.Js?

I am trying to create selected tab in Next.Js.
The User will have the option to search for data it can be Users or Posts, what the user will search for will be selected by clicking on one of the buttons.
Once the user clicks on the button the button will change background to blue.
However I can't make it to work properly, when the User clicks on the button the .Selected class gets added to the button but the button doesn't render the CSS.
import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'
import style from '../styles/Search.module.css'
const Search: PageWithLayout = () => {
const [searchPosts, setPostsSearch] = useState < String > ();
const setSearchOption = (searchFor: String) => {
let searchOption = '';
if (searchFor == 'POSTS') {
searchOption = 'POSTS';
} else {
searchOption = 'USERS';
let button = document.getElementById('usersOption') as HTMLElement;
button.className += style.Selected;
}
console.log(searchOption);
setPostsSearch(searchOption);
}
return (
<>
<div className='pageContent'>
<div className={style.SearchBarContainer}>
<div className={style.SearchContainer}>
<i className="fa-solid fa-magnifying-glass"></i>
<input className={style.SearchBar} type={'text'} placeholder='Search...' />
</div>
<div className={style.SearchOptions}>
<button id='usersOption' onClick={() => setSearchOption('USERS')}>Users</button>
<button id='postsOption' onClick={() => setSearchOption('POSTS')}>Posts</button>
</div>
</div>
<div className='SearchedContent'>
</div>
</div>
</>
)
}
Search.getLayout = function getLayout(page: ReactElement) {
return (
<MainLayout>
{page}
</MainLayout>
)
}
export default Search

you can use searchOption data for className style
import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'
import style from '../styles/Search.module.css'
const Search: PageWithLayout = () => {
const [searchPosts, setPostsSearch] = useState<String>();
return (
<>
<div className='pageContent'>
<div className={style.SearchBarContainer}>
<div className={style.SearchContainer}>
<i className="fa-solid fa-magnifying-glass"></i>
<input className={style.SearchBar} type={'text'} placeholder='Search...'/>
</div>
<div className={style.SearchOptions}>
<button id='usersOption' className={searchPosts === 'USERS' ? style.Selected : undefined } onClick={() => setPostsSearch('USERS')}>Users</button>
<button id='postsOption' className={searchPosts === 'POSTS' ? style.Selected : undefined } onClick={() => setPostsSearch('POSTS')}>Posts</button>
</div>
</div>
<div className='SearchedContent'>
</div>
</div>
</>
)
}
Search.getLayout = function getLayout(page: ReactElement){
return(
<MainLayout>
{page}
</MainLayout>
)
}
export default Search

Just have a state for active searchOption and apply the class conditionally directly into the JSX.
const [activeSearchOption, setActiveSearchOption] = useState('USERS')
return (
<>
<div className='pageContent'>
<div className={style.SearchBarContainer}>
<div className={style.SearchContainer}>
<i className="fa-solid fa-magnifying-glass"></i>
<input className={style.SearchBar} type={'text'} placeholder='Search...'/>
</div>
<div className={style.SearchOptions}>
<button id='usersOption' className={activeSearchOption === 'USERS' ? 'active' : ''} onClick={() => setSearchOption('USERS')}>Users</button>
<button id='postsOption' className={activeSearchOption === 'POSTS' ? 'active' : ''} onClick={() => setSearchOption('POSTS')}>Posts</button>
</div>
</div>
<div className='SearchedContent'>
</div>
</div>
</>
)

How do I use useRef to Open ActionSheet with Details

I am having a single fruit with a list of infestations that I'm mapping on my react component. I want to open an ActionSheet with the details of an individual infestation when it is clicked. I have tried this way but its not working. Anyone, please help.
import React, { useState, useEffect, useRef } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import Menubar from "../../components/menubar/Menubar";
import Tabs from "../../components/fruittabs/FruitTabs";
import WidgetSkeleton from "../../components/skeleton/WidgetSkeleton"
import Skeleton from "react-loading-skeleton";
import toast, { Toaster } from 'react-hot-toast';
import axios from 'axios';
import InfestationWidget from "../../components/widgets/InfestationWidget"
import ActionSheet from "actionsheet-react";
import { LazyLoadImage } from "react-lazy-load-image-component";
function FruitDetails() {
let navigate = useNavigate();
const [fruit, setFruit] = useState({});
const { fruitId } = useParams();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
let isMounted = true;
axios.get(`/api/fruit/${fruitId}`).then(res => {
if (isMounted) {
if (res.data.status === 200) {
setFruit(res.data.fruit);
setIsLoading(false);
}
else if (res.data.status === 404) {
toast.error(res.data.message, "error");
}
}
});
return () => {
isMounted = false
};
}, []);
const ref = useRef(fruit.infestation && fruit.infestation.infestationid);
const handleOpen = () => {
ref.current.open();
console.log(`Fruit Infestation id: ${fruit.infestation.infestationid}`);
};
const handleClose = () => {
ref.current.close();
}
return (
<div>
<Menubar />
<div className="appHeader bg-primary text-light">
<div className="left">
<a onClick={() => navigate(-1)} className="headerButton goBack">
<i className="fi fi-rr-angle-left"></i>{" "}
</a>
</div>
<div className="pageTitle">{fruit.name}</div>
<div className="right"></div>
</div>
<Toaster />
<div id="appCapsule">
<div className="section mt-3 mb-3">
{isLoading ?
<Skeleton height={150} /> :
<LazyLoadImage
effect="blur"
width={'100%'}
src={`${process.env.REACT_APP_API_URL}/storage/fruits/${fruit.image}`}
alt="image"
className="imaged img-fluid fruit-detail-main"
/>}
</div>
<div className="section mt-3 mb-3">
<div>
<Tabs>
<div label="Details">
{isLoading && (
<Skeleton height={25} count="8" className="mb-05" />
)}
<div
dangerouslySetInnerHTML={{
__html: fruit.description,
}}
/>
</div>
<div label="Infestations">
<div className="mb-1">Here are some of the Popular Infestations for {fruit.name}</div>
<h3 className="mb-1">All Infestations</h3>
<div className="row">
{isLoading && <WidgetSkeleton cards={6} />}
{fruit.infestation && fruit.infestation.map((infestation) => (
<div className="col-6" infestation={infestation} key={infestation.infestationid}>
<div className="card mb-2">
<a onClick={handleOpen}>
<LazyLoadImage
src={`${process.env.REACT_APP_API_URL}/storage/infestations/${infestation.infestationimage}`}
className="card-img-top" alt="image" />
<div className="card-body card-bodysmall">
<p className="mb-0 text-sm-x">{infestation.infestationtype}</p>
<h4 className="mb-0">{infestation.infestationname}</h4>
</div>
</a>
</div>
</div>
))}
</div>
</div>
<div label="Advice">
<div
dangerouslySetInnerHTML={{
__html: fruit.advice,
}}
/>
</div>
</Tabs>
<ActionSheet
ref={ref}
sheetStyle={{
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
height: '80%'
}}>
<div className="bar" />
//Single Fruit Infestation Details
</ActionSheet>
</div>
</div>
</div>
</div>
);
}
export default FruitDetails;

Each child in a list should have a unique "key" prop console error

Please help! I don't know why I'm getting this error. I can't find what I need to change :( The needed output in browser is perfectly fine. But I am getting this error. I'm not used to list and keys on react. I have the latest versions of React and Nodejs and the packages needed
Homescreen.js:
import React, { useState, useEffect } from 'react'
import axios from 'axios';
import Room from '../components/Room';
import Loader from '../components/Loader';
import Error from '../components/Error';
function Homescreen() {
let [rooms, setrooms] = useState([]);
const [loading, setloading] = useState();
const [error, seterror] = useState();
useEffect(() => {
async function getResults() {
try {
seterror(false);
setloading(true);
const data = (await axios('/api/rooms/getallrooms')).data;
setrooms(data);
setloading(false);
} catch (e) {
seterror(true);
setloading(false);
}
}
getResults();
}, []);
return (
<div className='container'>
<div className='row justify-content-center mt-5'>
{loading ? (
<Loader />
) : rooms.length > 1 ? (
rooms.map(room => {
return <div className="col-md-9 mt-3">
<Room room={room} />
</div>;
})
) : (
<Error />
)}
</div>
</div>
)
}
export default Homescreen;
//<h1>{room.name}</h1>
and my Room.js:
import React, { useState } from "react";
import { Modal, Button, Carousel } from 'react-bootstrap'
import { First } from "react-bootstrap/esm/PageItem";
import { Link } from 'react-router-dom'
function Room({ room }) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
< div className="row bs" >
<div className="col-md-4">
<img src={room.imageurls[0]} className="smallimg" />
</div>
<div className="col-md-7">
<h1>{room.name}</h1>
<b>
{" "}
<p>Max Count : {room.maxcount}</p>
<p>Phone Number : {room.phonenumber}</p>
<p>Type : {room.type}</p>
</b>
<div style={{ float: "right" }}>
<Link to={`/book/${room._id}`}>
<button className="btn btn-primary m-5">Book Now!</button>
</Link>
<button className="btn btn-primary" onClick={handleShow}>View Details</button>
</div>
</div>
<Modal show={show} onHide={handleClose} size='lg'>
<Modal.Header>
<Modal.Title>{room.name}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Carousel prevLabel='' nextLabel=''>
{room.imageurls.map(url => {
return <Carousel.Item>
<img
className="d-block w-100 bigimg"
src={url}
/>
</Carousel.Item>
})}
</Carousel>
<p>{room.description}</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
export default Room;
Browser Console Error:

You have to give the first element in a map function a key:
rooms.map((room, index) => {
return (
<div key={index} className="col-md-9 mt-3">
<Room room={room} />
</div>
);
});

React - Uncaught Error: Element type is invalid

[enter image description here]
Hello, I'm a new developer who has been working as a frontend developer for less than a year.
I'm making a blog project to study react.
However, the following error occurred in the middle.
I've been trying for a long time to figure this out, but I just couldn't find the answer.
There are many other files, but the error file code that I think is most likely is as follows.
I would really appreciate your help.
import React, { useEffect, Fragment } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Helmet } from "react-helmet";
import {
POST_DETAIL_LOADING_REQUEST,
POST_DELETE_REQUEST,
USER_LOADING_REQUEST,
POST_DETAIL_LOADING_SUCCESS,
POST_DETAIL_LOADING_FAILURE,
} from "../../redux/types";
import { Button, Row, Col, Container } from "reactstrap";
import { Link } from "react-router-dom";
import CKEditor from "#ckeditor/ckeditor5-react";
import GrowingSpinner from "../../components/spinner/Spinner";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {
faPencilAlt,
faCommentDots,
faMouse,
} from "#fortawesome/free-solid-svg-icons";
import BalloonEditor from "#ckeditor/ckeditor5-editor-balloon/src/ballooneditor";
import { editorConfiguration } from "../../components/editor/EditorConfig";
import Comments from "../../components/comments/Comments";
const PostDetail = (req) => {
const dispatch = useDispatch();
const { postDetail, creatorId, title, loading } = useSelector(
(state) => state.post
);
const { userId, userName } = useSelector((state) => state.auth);
const { comments } = useSelector((state) => state.comment);
console.log(req);
useEffect(() => {
dispatch({
type: POST_DETAIL_LOADING_REQUEST,
payload: req.match.params.id,
});
dispatch({
type: USER_LOADING_REQUEST,
payload: localStorage.getItem("token"),
});
}, [dispatch, req.match.params.id]);
const onDeleteClick = () => {
dispatch({
type: POST_DELETE_REQUEST,
payload: {
id: req.match.params.id,
token: localStorage.getItem("token"),
},
});
};
const EditButton = (
<Fragment>
<Row className="d-flex justify-content-center pb-3">
<Col className="col-md-3 mr-md-3">
<Link to="/" className="btn btn-primary btn-block">
Home
</Link>
</Col>
<Col className="col-md-3 mr-md-3">
<Link
to={`/post/${req.match.params.id}/edit`}
className="btn btn-success btn-block"
>
Edit Post
</Link>
</Col>
<Col className="col-md-3">
<Button className="btn-block btn-danger" onClick={onDeleteClick}>
Delete
</Button>
</Col>
</Row>
</Fragment>
);
const HomeButton = (
<Fragment>
<Row className="d-flex justify-content-center pb-3">
<Col className="col-sm-12 com-md-3">
<Link to="/" className="btn btn-primary btn-block">
Home
</Link>
</Col>
</Row>
</Fragment>
);
const Body = (
<>
{userId === creatorId ? EditButton : HomeButton}
<Row className="border-bottom border-top border-primary p-3 mb-3 d-flex justify-content-between">
{(() => {
if (postDetail && postDetail.creator) {
return (
<Fragment>
<div className="font-weight-bold text-big">
<span className="mr-3">
<Button color="info">
{postDetail.category.categoryName}
</Button>
</span>
{postDetail.title}
</div>
<div className="align-self-end">{postDetail.creator.name}</div>
</Fragment>
);
}
})()}
</Row>
{postDetail && postDetail.comments ? (
<Fragment>
<div className="d-flex justify-content-end align-items-baseline small">
<FontAwesomeIcon icon={faPencilAlt} />
<span> {postDetail.date}</span>
<FontAwesomeIcon icon={faCommentDots} />
<span>{postDetail.comments.length}</span>
<FontAwesomeIcon icon={faMouse} />
<span>{postDetail.views}</span>
</div>
<Row className="mb-3">
<CKEditor
editor={BalloonEditor}
data={postDetail.contents}
config={editorConfiguration}
disabled="true"
/>
</Row>
<Row>
<Container className="mb-3 border border-blue rounded">
{Array.isArray(comments)
? comments.map(
({ contents, creator, date, _id, creatorName }) => (
<div key={_id}>
<Row className="justify-content-between p-2">
<div className="font-weight-bold">
{creatorName ? creatorName : creator}
</div>
<div className="text-small">
<span className="font-weight-bold">
{date.split[0]}
</span>
<span className="font-weight-light">
{date.split[1]}
</span>
</div>
</Row>
<Row className="p-2">
<div>{contents}</div>
</Row>
<hr />
</div>
)
)
: "Creator"}
<Comments
id={req.match.params.id}
userId={userId}
userName={userName}
/>
</Container>
</Row>
</Fragment>
) : (
<h1>hi</h1>
)}
</>
);
console.log(comments, "Comments");
return (
<div>
<Helmet title={`Post | ${title}`} />
{loading === true ? GrowingSpinner : Body}
</div>
);
};
export default PostDetail;
<Helmet title={Post | ${title}} />
Even though you wrote the syntax above, the title value is not output.
enter image description here
The structure is as follows:
(postWrite) -> write post + click button -> save post + move postDetail page (error)
+) The code is quite long, but I'm sorry I couldn't highlight it. As for me, I have no idea which part of this file is the problem....

Just looking through the code and the error message you're seeing, there doesn't appear to be anything wrong with the exported component. Rather, it seems that the way you're importing the component might be wrong.
export default PostDetail
This means that you'll need to import the component using this syntax:
import PostDetail from './path-to-component'

I too had the same problem, mine was fixed when I used
import { CKEditor } from "#ckeditor/ckeditor5-react";
in place of
import CKEditor from "#ckeditor/ckeditor5-react";

How to dispatch add and view functions inside same connect function in redux?

I'm using redux in my project. I have already completed getting data from the database and display them in the UI. Now what I want to do is add a create part in the same file. I can't think of a way how to dispatch it inside connect.For the instance in my action file I'm just console logging.If it logs I know how do the rest. Could you please help me to find a way to dispatch the create function? What I need to run is the this.props.addComments(this.state.commentText); inside handleClick() function.
ViewTicket.js
import React from 'react';
import TicketAction from './../../components/TicketTable/TicketAction/TicketAction';
import {
ChevronLeft,
Archive,
ArrowClockwise,
Share,
Pencil
} from 'react-bootstrap-icons';
import Card from 'react-bootstrap/Card';
import { Row, Col } from 'reactstrap';
import { Tabs, Tab } from 'react-bootstrap';
import { connect } from 'react-redux';
import moment from 'moment';
import RichTextEditor from './../../components/EditorToolbar/RchTextEditor';
import PriorityBadge from './../../components/PriorityBadge/PriorityBadge';
import UserIcon from './../../components/UserIcon/UserIcon';
import { getTicketByID, addComments } from './actions/TicketActions';
import ActionButton from './../../components/ActionButton/ActionButton';
import './ViewTicket.scss';
class ViewTicket extends React.Component {
constructor(props) {
super(props);
this.state = {
editorText: 'This comes in the text editor',
commentText: '',
id: ''
};
}
componentDidMount() {
const { match } = this.props;
let id = match.params.id;
this.setState({
id: match.params.id
});
this.props.getTicketByID(id);
}
displayComments = () => {
if (this.props.comments[0] !== undefined) {
return this.props.comments.map((item) => {
return (
<div>
<Row style={{ marginBottom: 40 }}>
<Col sm={1} className="user-avatar">
<UserIcon name="Sam Smith" size="40" />
</Col>
<Col sm={7}>
<div className="text p2">
<p2>Sam Smith</p2>
</div>
<div className="text p4">
<p4>{item.description}</p4>
</div>
</Col>
<Col sm={4} className="comment-date-text text p4">
<p4>December 27 ,2020,11.02 AM</p4>
</Col>
</Row>
<div className="hr-line"></div>
</div>
);
});
}
};
handleChangeInputs = (event) => {
this.setState({ commentText: event });
console.log(this.state.commentText);
};
handleClick = () => {
console.log('Handle Click');
console.log(this.state.commentText);
this.props.addComments(this.state.commentText);
};
render() {
let {
id,
title,
employer,
description,
assignee,
status,
priority,
date
} = this.props;
// Change the date format
date = moment(this.props.date).format('L');
return (
<div>
<div className="icon-list">
<TicketAction icon={<ChevronLeft />} tooltip="Back" />
<TicketAction icon={<ArrowClockwise />} tooltip="Refresh" />
<TicketAction icon={<Archive />} tooltip="Archive" />
<TicketAction icon={<Share />} tooltip="E-mail" />
<TicketAction icon={<Pencil />} tooltip="Edit" />
</div>
<div>
<Card className="card">
<Row>
<Col sm={9}>
<Card.Body>
<div className="header-date text p2">
<p2>2 DAYS AGO ON TUESDAY AT 5.43 AM</p2>
</div>
<Row>
<Col sm={3} className="title">
<h2>{title}</h2>
</Col>
<Col sm={7} className="drop-down">
<PriorityBadge priority="Error" />
</Col>
<Col sm={1}>
<Pencil />
Edit
</Col>
</Row>
<div className="ticket-data-topic text p3">
<p3>Hello,</p3>
<div className="ticket-data-content text p4">
<p4
dangerouslySetInnerHTML={{
__html: description
}}
></p4>
</div>
<hr />
<br />
<Tabs>
<Tab eventKey={1} title="Comments">
<br />
<br />
{this.displayComments()}
<br />
<h3 className="add-comment-heading">Add Comment</h3>
<Row className="comments-section">
<div className="user-avatar-add-comments-section">
<UserIcon name="Shanil Silva" size="40" />
</div>
<Col sm={11}>
<RichTextEditor
editorStyle={'text-editor-view'}
value={this.state.commentText}
buttonText={'Add'}
onChange={this.handleChangeInputs}
onClick={this.handleClick}
/>
</Col>
</Row>
</Tab>
<Tab
eventKey={2}
title="History"
className="nav-item nav-link active"
>
History
</Tab>
</Tabs>
</div>
</Card.Body>
</Col>
<Col sm={1}>
<div className="vl"></div>
</Col>
<Col sm={2} className="ticket-data-item-col">
<Card.Body>
<div className=" ticket-item-title text p4">
<p>Created by</p>
</div>
<h4>John Doe (john#gmail.com)</h4>
<p className="ticket-data-item">{date}</p>
<div className=" ticket-item-title text p4">
<p>Ticket ID</p>
</div>
<h4 className="ticket-data-item">{id}</h4>
<div className=" ticket-item-title text p4">
<p>Employer</p>
</div>
<h4 className="ticket-data-item">{employer}</h4>
<div className=" ticket-item-title text p4">
<p>Assigned to</p>
</div>
<h4 className="ticket-data-item">{assignee}</h4>
<div className=" ticket-item-title text p4">
<p>Status</p>
</div>
<h4 className="ticket-data-item">{status}</h4>
<div className=" ticket-item-title text p4">
<p>Priority</p>
</div>
<div className=" ticket-data-item-badge text p4">
<PriorityBadge priority={priority} />
</div>
<div className=" ticket-item-title text p4">
<p>Last Updated</p>
</div>
<h4>John Doe</h4>
<p>03/05/2020</p>
</Card.Body>
</Col>
</Row>
</Card>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
let {
id,
title,
employerId,
description,
assignee,
ticketStatus,
ticketPriority,
ticketType,
createdTs
} = state.ViewTicketByID.ticketContent.data;
let comments = state.ViewTicketByID.ticketContent.comments;
return {
id: id,
title: title,
employer: employerId,
description: description,
assignee: assignee,
status: ticketStatus,
priority: ticketPriority,
type: ticketType,
date: createdTs,
comments
};
};
const mapDispatchToProps = (dispatch, ownProps) => {
let ticketID = ownProps.match.params.id;
return {
getTicketByID: () => dispatch(getTicketByID(ticketID))
};
};
export default connect(
mapStateToProps,mapDispatchToProps
)(ViewTicket);
TicketActions.js
import * as ActionTypes from '../actionTypes/ticketsActionTypes';
import TicketService from '../ViewTicketService';
export const getTicketByID = (id) => {
return (dispatch) => {
dispatch({ type: ActionTypes.GET_TICKET_BY_ID_IN_PROGRESS });
TicketService.findTicketByID(id)
.then((response)=>
dispatch({
type:ActionTypes.GET_TICKET_BY_ID_COMPLETED,
payload:response
})
)
.catch((error)=>
dispatch({
type:ActionTypes.GET_TICKET_BY_ID_FAILED,
payload: error
})
)
};
};
export const addComments = (commentData) => {
return (dispatch) => {
console.log('Ticket Actions add Comments');
dispatch({ type: ActionTypes.GET_TICKET_BY_ID_IN_PROGRESS });
// TicketService.findTicketByID(id)
// .then((response)=>
// dispatch({
// type:ActionTypes.GET_TICKET_BY_ID_COMPLETED,
// payload:response
// })
// )
// .catch((error)=>
// dispatch({
// type:ActionTypes.GET_TICKET_BY_ID_FAILED,
// payload: error
// })
// )
};
};

I found the issue. You need to pass the function addComments in mapDispatchToProps. e.g.
const mapDispatchToProps = (dispatch, ownProps) => {
let ticketID = ownProps.match.params.id;
return {
getTicketByID: () => dispatch(getTicketByID(ticketID)),
addComments
};
};