Geethika
RReactiflux
•Created by Geethika on 10/5/2023 in #react-forum
React-hook-form displaying required type error even when fields are populated.
Hi! I am using react-hook-form in my React.js project. I have fields that use controller as they are custom components. When I fill in those fields and submit I am getting the error message fields are required.
Below is the code for components:
<Controller
control={control}
name="status"
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<FormRowSelect
name="status"
labelText="FreeLance Availability"
value={value}
handleChange={onChange}
list={["Yes", "No"]}
disabled={!isEditing}
/>
)}
/>
{errors.status &&
<Notification color="red" title="Please fill!">
Status is mandatory!
</Notification>
}
2 replies
RReactiflux
•Created by Geethika on 6/13/2023 in #react-forum
I have JSON response as below
{
"data": [
{
"id": 3,
"attributes": {
"industryType": "Food And Beverage",
"about": "*Michael’s Icecream Burger* is the first of its kind, Conceptualized in New York. “CRUNCHILICIOUS!!!” - Hot & Crunchy on the outside, Cold & Mushy on the inside. We also serve the most creamiest ice cream Scoops & Sundaes. \n\n*Michael’s Icecream Burger* is UNIQUE!!! and highly profitable in all the ways…\n\n*Products and Services*\n\nLow Investment\nHighest profit margin compare to any other competitor (150% to 300% Profit Margin)\nHighly affordable prices (Rs. 40/- to Rs. 140/-)\nAvailable in 3 Formats – Mobile Vehicle, Mall Kiosk, Independent Store\nProducts and Services\n\nIce cream burgers, ice cream sundaes, exotic and natural ice cream scoops, a range of hot and cold coffees, Belgian waffles.,
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
I would like to extract about from the JSON string and split it based on newline char. I've done this using str.split("\n") and also str.split(/\n/) but it doesn't seem to work. Please help find the problem!5 replies
RReactiflux
•Created by Geethika on 6/10/2023 in #react-forum
SassError: $color: var(--bs-secondary-color) is not a color
Getting this error even though I havent made changes to the sass files.
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[9].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[9].use[4]!./src/scss/style.default.scss
SassError: $color: var(--bs-secondary-color) is not a color.
╷
185 │ "r": red($color),
│ ^^^^^^^^^^^
Please help me understand !2 replies
RReactiflux
•Created by Geethika on 5/27/2023 in #react-forum
Hamburger menu items not displaying one below the other
I am using react-bootstrap Navbar in my project. I have currently divided Navbar into 2 rows by means of unordered list. When I shrink window size on my desktop / view in mobile, the hamburger menu items are displayed one next to eachother and not below eachother. Please help!
<Navbar
expand="lg"
expanded={collapsed}
>
<Container fluid>
<Link href="/" passHref>
<Navbar.Brand className="py-1">
<img
src="/content/svg/logo.svg"
width="140"
height="33"
alt="Directory logo"
/>
</Navbar.Brand>
</Link>
{/* </div> /}
<Navbar.Toggle aria-controls="navbar-main-menu"
onClick={() => setCollapsed(!collapsed)} />
<Navbar.Collapse id="navbar-main-menu ">
<Nav className="ms-auto align-items-lg-auto">
{/ <Nav.Link href="/">Home</Nav.Link> /}
<div classname='d-flex flex-column'>
<div className="d-flex flex-row justify-content-end" style={{margin:'0 0 3px 0'}}>
<ul style={{ listStyleType: 'none' ,margin:'0 0 1px 0'}} >
<li >
<TopNav />
</li>
</ul>
</div>
<div className="d-flex flex-row justify-content-end">
<ul style={{ listStyleType: 'none' }} >
<li>
<div className="d-flex flex-row justify-content-end" >
...
{!dataSession.session && <Nav.Link href="/signup" passHref>Register</Nav.Link>}
{!dataSession.session && <Nav.Link href="/login" passHref>Sign In</Nav.Link>}
{!dataSession.session && <Nav.Item
key={"Add-listing"}
className={
"mt-3 mt-lg-0 ms-lg-3 d-lg-none d-xl-inline-block"
}
>
<ActiveLink activeClassName="active"
href={{
pathname: '/login',
query: { from: 'add-listing' },
}}
passHref
>
<Button
onClick={() => onLinkClick(item.title)} >
Add a Listing
</Button>
</ActiveLink>
</Nav.Item>}
{/ </div> /}
{/ USER MENU /}
{/ <div className="col"> /}
{dataSession.session && <UserMenu onLinkClick={onLinkClick} />}</div>
{/ USER MENU /}
{/ </div> */}
</li>
</ul>
</div>
</div>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
9 replies
RReactiflux
•Created by Geethika on 5/24/2023 in #react-forum
Need to make two rows within the navbar
5 replies
RReactiflux
•Created by Geethika on 5/12/2023 in #react-forum
Need ideas on implementation based on concept of routing and storing
I am using Next.js, Supabase & Strapi in a project i'm working on.
I have a button in the homepage called "Add a user". On clicking the button I'd like either of the 2 below scenarios to happen.
Scenario 1. Go to sign up page (if new user) / login page is registered user --> After login --> Go to page where user details are entered by end-user and then captured to store in DB --> Other actions.
Scenario 2. Go to page where user details are entered by end-user -> hold the data -> prompt user to login / register --> Save the previously entered data.
How can I achieve either of the above 2 scenarios. Please help! Looking for snippets or concept ideas.
3 replies
RReactiflux
•Created by Geethika on 5/7/2023 in #react-forum
Server ErrorError: Element type is invalid: expected a string (for built-in components)...
I am getting this error in console and also when I go to the page personal-info in my next.js project! --->
Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I am trying to route to personal-info page from sign up page.
Code snippets:
>> Function that handles what happens after recieveing sign up OTP ,
const handleOtp = async (otpNumber, phoneNumber,userPassword) => {
try {
setLoading(true);
....
if (error) throw error;
else {
alert("Welcome!");
router.push('/personal-info')
}
...
} catch (error) {
//console.log(phoneNumber, otpNumber,userPassword);
alert(error.error_description || error.message);
} finally {
setLoading(false);
}
};
>> Personal info page code
import PersonalDetails from "../components/PersonalDetails"
const PersonalInfo = () => {
return (
<>
<PersonalDetails/>
</>
)
}
export default PersonalInfo
>> Personal details page code snippets
...
const goToHomePage = () => {
router.push('/')
}
...
<Button size="lg"
className="button block"
onClick={goToHomePage}
>
<span>Save</span>
</Button>
...13 replies
RReactiflux
•Created by Geethika on 2/25/2023 in #react-forum
Set.prototype.has() returns false even when element is present
44 replies