Why are my React NavBar buttons not working? - javascript

I am creating a clone of the Netflix web app. I am currently developing the landing page. I have included my code below. This is one of the few different ways I have attempted structuring this page.
The layout currently is appearing how I want it to look, however the "main-slice__language-button" and the "main-slice__signin-button" at the top of the page are not working – meaning nothing happens when I click the select dropdown, and the Sign In button is not appearing as clickable. Can anyone explain why it does not work this way and any suggestions for better alternatives?
screenshot of landing page
import backgroundImage from '../../images/mooshflix-background.jpeg';
import netflixLogo from '../../images/netflix-logo.png';
import './MainSlice.css';
const MainSlice = () => {
return (
<div className='main-slice-container'>
<img className='background-image' src={backgroundImage} alt='mooshflix background' />
<div className='header'>
<img className='main-slice__logo' src={netflixLogo} alt='' />
<div className='main-slice__header-buttons'>
<select className='main-slice__language-button'>
<option>English</option>
<option>Spanish</option>
</select>
<button className='main-slice__signin-button'>Sign In</button>
</div>
</div>
<div className='main-slice__text-container'>
<h1 className='main-slice__title'>Unlimited movies, TV shows, and more.</h1>
<h2 className='main-slice__subtitle'>Watch anywhere. Cancel anytime.</h2>
<div className='main-slice__email-form-container'>
<h3 className='email-form-title'>Ready to watch? Enter your email to create or restart your membership.</h3>
<form>
<input placeholder='Email Address' ></input>
<button className='main-slice__email-form-button'>Get Started ></button>
</form>
</div>
</div>
</div>
)
}
export default MainSlice;```

because you DID NOT do anything, what event did u call for that button? you have to add some event listeners like onClick to your btn, like below:
const onStart = () => {
DO STH WHAT YOU WANT
}
<button className='main-slice__email-form-button' onClick={onStart}>
Get Started
</button>

Related

How to display Card data in a modal menu react.js 2022 - 2023

I have card mapped with data from an "json" file and want the same details on the card to display on the modal menu
In the code snippet is the code for the cards that are displayed and the modal the modal works properly (opens and closes) but I now want to use the data from the cards in the modal but it doesn't show. I used the card key to specify which cards data to use but don't think that it works this way. I am new to react and think I need to use props but can't find any material that can explain it in a way I understand. Please help if you can any critsism will be gladly accepted and any other ways to improve my code will also help. Any learning material will also be hugely helpful.
Code:
{
details.map((details) => {
return (
<div className="card" key={details.id}>
<img src={details.image} alt="" />
<h5 className="board-name">{details.design}</h5>
<p className="board-size">Size: {details.size}</p>
<h6 className="board-price">{details.price}</h6>
<button className="add-to-cart" onClick={() =>
setModalDisplay(true)}> click me
</button>
</div>
)
})
}
{modalDisplay &&
<div className="backdrop">
<div className="cart-card" key={details.id}>
<div className="item-details">
<img src={details.image} alt="" width="98px" height="98px" />
<h4 className="item-name">{details.design}</h4>
<p className="item-size">{details.size}</p>
<h6 className="item-price">{details.price}</h6>
<button className="exit-modal" onClick={() =>
setModalDisplay(false)}>
</button>
</div>
<span className="modal-inputs">
<button className="minus-btn">-</button>
<input type="text" className="amount-input" value="01" />
<button className="plus-btn">+</button>
<button className="add-btn">Add to cart</button>
</span>
</div>
</div>
}
</div>
You could store the card data in an onClick that sets it in an state for example and use the state in the modal as props or directly. I think that would be the best option to use in this case.

Why a canvas update reload the page ? React

I would like to implement a signature system inside my form, I use "react-signature-canvas" for this.
Unfortunately, when I try to use it some problem appears.
My main problem is the reloading my page. Usually in React When you update something ,just the render changing without reloading. But here it does ... Is it linked to the canvas system ? I don't want the reload of my page... It's so ugly for a PWA.
For example when I click on "clear" or "trim" the page reload.
This is my code: I removed some parts of it to be clearer
const Consultation4 = () => {
const sigPad = {}
const [trimmedDataUrl,setTrimmedDataUrl] = useState(null);
const clear = () => sigPad.clear();
const trim = () => {
setTrimmedDataUrl(sigPad.getTrimmedCanvas().toDataURL('image/png'));
}
...
(In the render)
<FormGroup tag="fieldset" className="form-group">
<div className="container">
<div className="row">
<div className="col-4 margin-left--12px">
<legend>Please sign here:</legend>
</div>
<div className="col-4 margin-button-clear">
<button onClick={clear} className="btn btn-outline-secondary btn-sm">Clear</button>
</div>
<div className="col-4 margin-button-clear">
<button onClick={trim} className="btn btn-outline-secondary btn-sm">Trim</button>
</div>
</div>
</div>
<div className='border_grey'>
<SignaturePad ref={sigPad} />
</div>
</FormGroup>
{trimmedDataUrl ? <img src={trimmedDataUrl}/> : null}
}
Could you help me please ? Thanks in advance
PS: I have a second little problem, when I try to use sigPad.isEmpty() the compilator said "this method does not exist". But it exist in the doc of signature-pad-canvas (https://www.npmjs.com/package/react-signature-canvas).
The default type of button elements issubmit. Try button tags like
<button type="button" ....
within the form to stop submission from them. Text input elements may also need attention to stop pressing enter from submitting the form as well.

How to access to state of repeated component in ReactJS

i am new to reactjs. I want to access state of a repeated react component. My code is
{Object.keys(this.state.sharing).map((share)=>{
return(<Sharings />)
})}
above component is repeated 3 times
The Sharing Component contains radio buttons and button.
When the radio button is clicked then only button is enabled.
Here is my code
<div className="col-xs-12 col-md-4">
<div className="book-now-card p-b-10" style={{height:height}}>
<div className="single-sharing" style={{height: '180px'}}>
<h3 className="single-sharing-heading">{props.heading}</h3>
</div>
<div className="m-t-20">
{
props.rent.map((rent)=>{
return(
<div className="m-10" key={rent}>
<input type="radio" name={'radio'} className="m-l-20 " onClick={(e)=>{this.handleChange(rent,e)}} /> <span className="m-l-20" style={{color:'#009688'}}>₹ {rent}</span>
<p className="m-l-55 f-s-12" style={{color: '#65747a'}}>{props.details}</p>
</div>
)
})
}
</div>
<div className="m-20">
<button className="btn btn-secondary col-6 select-rent" disabled={true} onClick={(e)=>{this.proceed(e)}} id={'Button'+this.props.num}>SELECT</button>
</div>
</div>
</div>
I want disable button in button in 1st and 3rd sharing component when radio button in 2nd sharing Component is clicked. I tried DOM manipulation with document.getElementById but click function in button stopped working.
Your input component should be controlled component
In your map method you should have something like this:
<input
type="radio"
name={'radio'}
className="m-l-20 "
value={this.state.radiosValues[index]} {/* get radio value from state */}
onClick={()=>{ // We don't need event because we work with booleans
const radiosValues = this.state.radiosValues
radiosValues[index] = !radiosValues[index] // If true we want false, if false we want true
this.setState({ radioValues})
}}
/>

How to display a hidden div on button click and hide the clicked button in Angular 2?

I'm facing difficulties in Angular UI development. Here I'm having a requirement that:
on click of Add Button it should show a hidden form:
on click of Add Button -> Add Button should hide
in hidden form there will be a button Cancel-
if I click on cancel the form should hide and add button should return
I have tried this using Angular 2 template syntax and by declaring nested boolean values, but I'm not getting the perfect answer.
How to do this in Angular 2 or 4? Do I have to use any host Listener or event emitter for this? I'm sharing my sample code and plunker:
template.html
<button(click)="addParameter=addParameter==true?false:true">
Add</button>
<div class="Parameters" *ngIf="addParameter==true">
<input name="hello">
<button (click)="hideForm();">Cancel</button>
</div>
test.ts
export class App {
private addParameter:boolean=false;
}
https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview
You can do this in a couple of ways. Depending on if you want to handle it in component or in template. I personally prefer to keep template clean and do the "work" in component. So in that case your code would simply look like this:
<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="toggleForm()">Cancel</button>
</div>
and TS:
toggleForm() {
this.addParameter = !this.addParameter
}
DEMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview
and as said, if you want to do this in template, it would look like this:
<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="addParameter = !addParameter">Cancel</button>
</div>
DEMO: https://plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs?p=preview
I think what you're looking for is something like:
<div>
<form>
<input name="hello">
<button *ngIf="addingForm===false" (click)="addingForm = true">Add</button>
<button *ngIf="addingForm===true" (click)="addingForm = false">Cancel</button>
</form>
<form *ngIf="addingForm===true">
<input name="hidden">
</form>
</div>
In TS:
addingForm = false;
Like here: https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview

Search should remain in mobile app domain instead of going to api React.js

I have created a search bar for a mobile app using react.js and it’s also created for desktop api, when I search from mobile app then search result redirects me to desktop api. I want to remain in mobile app when I search from it. It’s base url is baseUrl: 'http://desktop.version.local' but I want to change it to 'http://mobile.version.local', Location.origin can do it, but I don't know how it will be, so anybody have idea how I can do this?
Here is my Search bar code...
class SearchBar extends React.Component {
render() {
return (
<div className="row">
<div className="col-md-12 col-xm-12 col-sm-12 col-xs-12">
<div className="col-md-4 search-top">
<div className="search-header">
<form id="search_mini_form" className="navbar-search" action="/searchresults.html" method="get" encType="text-plain">
<input type="text" className="search" placeholder="Search by item or category" name="q" id="search" autoComplete="off" />
<button className="search-btn"><span id="icons8-search" className="icons8-search">Search</span><i className="fa fa-angle-right" /></button>
<div id="search_autocomplete" className="search-autocomplete" />
</form>
</div>
</div>
</div>
</div>
);
}
componentDidMount() {
if (document.getElementById('search_mini_form')) {
document.getElementById('search_mini_form').action = window.colemanReact.config.baseUrl + "/searchresults.html";
}
}
}
window.colemanReact.config.baseUrl has desktop version url so I want to change it to mobile version...
its done by adding
window.location.origin
but when i search it then it redirect to 404 page error on mobile.

Categories