I'm a react beginner, currently learning NextJS.
I've created a simple component in CreateSubject.js:
import React from 'react';
export default function CreateSubject(props) {
return (
<div>
<div className="field">
<label className="label">Name</label>
<div className="control">
<input
ref="input"
className="input"
type="text"
/>
</div>
</div>
<div className="field is-grouped is-grouped-right">
<p className="control">
<a
className="button is-primary"
onClick={props.onClick}
>
Validate
</a>
</p>
<p className="control">
<a className="button is-light">
Cancel
</a>
</p>
</div>
</div>
)
};
This code is NOT working, I got the following error:
Uncaught TypeError: Cannot read property 'suppressHydrationWarning' of null
If I change this function into a Component:
import React from 'react';
export default class CreateSubject extends React.Component {
render() {
return (
<div>
<div className="field">
...
it's working well. What is wrong with the first code?
For more information, I'm using NextJS, and CreateSubject is called like that:
import React from 'react';
import Navbar from './Navbar';
import Modal from './Modal';
import CreateSubject from './forms/CreateSubject';
let displayShowModal = false;
const createSubject = () => {
alert('okkkk')
};
export default () => (
<div>
<Modal display={displayShowModal} title="Creating subject">
<CreateSubject onClick={createSubject}/>
</Modal>
<Navbar/>
</div>
);
The issue was due to the input field having a ref attribute. Removing the ref attribute that wasn't that useful anyway fixed the issue.
The problem was that you used a functional component and we should use useRef for it: https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components. Also, be cautious when you pass ref attribute to your element. Often people pass name of the ref as a string instead of using {}.
In your case it should be:
import React, {useRef} from 'react';
export default function CreateSubject(props) {
const anyName = useRef(null);
...
<input
ref={anyName} // not ref="anyName"
className="input"
type="text"
/>
...
}
Remove the ref attribute in the input tag. If you really need to use it, use useRef as an {object}, not as a "String".
I ran into the same issue today at work!
Related
I am making a cart and when I click Add to cart then the number of times increases this is done using hooks and is in the following Pricetag.jsx
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
Now I want to use the value of count in other jsx,
import React from 'react'
import './Body.css'
import image2 from './assets/cake9.jpeg'
import image9 from './assets/cake16.jpeg'
import Pricetag from './Pricetag'
export default function Body(props) {
return (
<>
<div className="headingbody">
<div></div>
{props.title}
</div>
<div className="cart">
<div className="number34"> ** here I want to show my count **</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image10} name="Swimming cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image11} name="Rossy cake" bold="Rs 345" cut="Rs 634" />
</div>
</>
)
}
Can you tell me how can I use the value of count from the first to the second?
There are a few ways you can use:
state management: redux, zustand,...
using React Context
you can pass the value through props but it will cause 'hell props'
You have to pass the count state to the other JSX file (component). There are some ways:
Import the JSX file and call the component inside Pricetag.jsx, then pass count as a prop.
If you are unable to use the component inside Pricetag.jsx, then Use state management solutions like Context API, Redux, MobX etc.
brother, you can find the description and idea from the below document of useContext API calling and its functionaloty
https://www.geeksforgeeks.org/reactjs-usecontext-hook/
https://reactjs.org/docs/hooks-reference.html#usecontext
When I started the project, I never thought of adding a cart, but now I want to.
Let me tell you the structure,
I have a jsx called Pricetag.jsx in which I have defined how my card will look like it has name, image, and add to cart.
Here is my Pricetag.jsx
import React from 'react'
import './Body.css'
// import './Cart.js'
import { useState } from 'react'
export default function Pricetag(props) {
const [count, setCartCount] = useState([]);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
And this is the Birthday.jsx where I have used Pricetag information using props,
import React from 'react'
import './Body.css'
import { Link } from 'react-router-dom'
import Pricetag from './Pricetag'
import image80 from './assets/cake80.jpeg'
import image81 from './assets/cake81.jpeg'
export default function Cakebody(props) {
return (
<>
<Link to='/' className="menulink con112 ">
<div className='name1' >Back to home page</div>
</Link>
<div className="headingbody">
{props.title}
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
</div> </>
)
}
Now first I tried my self, then after watching some tutorials I noticed that they all are using objects to store data -> id, name, price, and all but, is there any way I can do it without it.
I want to some how grab the name and image of the cake from the birthday.jsx and want to send it to a new cart.jsx.
In fact JS is an object, everything in JS is kind of an object
if you find way to do something is JS without using object let me know
here is my code where i'm trying to pass object like{title,description,backgroundImg ....} to section component using props , I am getting all the key & value but when I use it on section component getting all data value instead of backgroundImg why..?
import React from "react";
import Section from "./Section";
function Home() {
return (
<div>
<div className="container">
<Section
title="Model S"
description="Order Online for Touchless Delivery"
backgroundImg="model-s.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
<Section
title="Model Y"
description="Order Online for Touchless Delivery"
backgroundImg="../images/model-y.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
</div>
);
}
export default Home;
to
import React from "react";
import DownArrow from "../images/down-arrow.svg";
const Section = (props) => {
return (
<div
className="Wrap"
style={{ backgroundImage: `url(${props.backgroundImg})` }}
>
<div className="item_text">
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
<div className="">
<div className="item_buttom">
<div className="leftButton">{props.leftButton}</div>
<div className="RightButton">{props.rightButton}</div>
</div>
<div>
<img src={DownArrow} alt="svgImg" className="DownArrow" />
</div>
</div>
</div>
);
};
export default Section;
My image folder path is "../images/..."
You need to import image in your home component.
Like
import sectionImage from "../images/image.jpg";
then pass the image like
<Section
backgroundImg={sectionImage}
/>
Then it should work fine.
Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;
One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.
I want to upload and read a file locally, but I want to do that using a custom button not using HTML input.
<input type="file" id="my_file_input" />
I found this way but I don't want to use this shape or this button, I wanted to use a material UI Raised Button to do this functionality to match the other site Button.
I also tried the following way but it didn't work because as i clicked the button nothing happened.
<input type="file" id="my_file_input" style={{display:"none"}}/>
<label htmlFor="my_file_input">
<RaisedButton
label="Import from Excel"
labelColor="#FFFFFF"
backgroundColor="#01579b"
/>
</label>
I thought I should do the uploading/reading file functionality manually in the onClick function of the RaisedButton but I didn't find a way to do that.
So is there any other solution for this problem in react?
I hope this code will help you.
We can solve it in two ways.
1-)
HTML
<div>
<input type="file" hidden ref={this.inputReference} onChange={this.fileUploadInputChange} />
<button className="ui button" onClick={this.fileUploadAction}>
Image Upload
</button>
{this.state.fileUploadState}
</div>
REACT CONSTRUCTOR
constructor(props) {
super(props);
this.state={fileUploadState:""}
this.inputReference = React.createRef();
}
ONCLICK FUNCTION
fileUploadAction = () =>this.inputReference.current.click();
fileUploadInputChange = (e) =>this.setState({fileUploadState:e.target.value});
2-)
HTML
<div>
<input id="fileButton" type="file" hidden />
<button onClick={this.fileUploadButton}>
Image Upload
</button>
{this.state.fileUploadState}
</div>
React State
this.state = {fileUploadState:""}
React Function
fileUploadButton = () => {
document.getElementById('fileButton').click();
document.getElementById('fileButton').onchange = () =>{
this.setState({
fileUploadState:document.getElementById('fileButton').value
});
}
}
I wanted to provide an update for using refs with functional components. Here is a quick example:
Import React, {useRef} from 'React'
const myComponent = () => {
const fileInputRef=useRef();
const handleChange(event) = () =>{
// do something with event data
}
return(
<>
<button onClick={()=>fileInputRef.current.click()}>
Custom File Input Button
</button>
<input onChange={handleChange} multiple={false} ref={fileInputRef} type='file'hidden/>
</>
)
}
please read API of React Material https://material-ui.com/demos/buttons/
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function ContainedButtons(props) {
const { classes } = props;
return (
<div>
<input
accept="image/*"
className={classes.input}
id="contained-button-file"
multiple
type="file"
/>
<label htmlFor="contained-button-file">
<Button variant="raised" component="span" className={classes.button}>
Upload
</Button>
</label>
</div>
);
}
ContainedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ContainedButtons);
As the doc says, you just need to add:
component="span"
To the button component.