Develop Reference

I can not read the uplodade file from App.js

I want to upload and read some text files in my app. I have [file, setFile] in my App.js . I want to upload a file from homepage.js and keep it in the file. When I want to check file in homepage.js with console.log(file) I see null:
I need some help about that. If you need more info about code just ket me know. Thanks.
Here is my App.js file:
function App() {
const [file, setFile] = React.useState(null);
const [convertedFile, setConvertedFile] = React.useState(null);
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Homepage file={file} setFile={setFile} />} />
<Route path="convert" element={<Convert file={file} setConvertedFile={setConvertedFile}/>} />
<Route path="download" element={<Download convertedFile={convertedFile}/>} />
</Routes>
</Router>
</div>
);
}
Here is my homepage.js file:
function Homepage(props) {
const handleSubmit = (e) => {
e.preventDefault();
props.setFile(document.getElementById("file").files[0]);
console.log(props.file);
}
return (
<div>
<Container>
<Row style={{marginTop:"15vh"}}>
<Col>
<h1>Homepage</h1>
</Col>
</Row>
<Row style={{marginTop:"10vh"}}>
<Col>
<p style={{border:'1px solid black'}}>This tool fixes Turkish character issue on your subtitle files</p>
<div>
<Form >
<Form.Group className="mb-3">
<Form.Label>Upload your file</Form.Label>
<Form.Control id="file" type="file" />
</Form.Group>
<Button onClick={handleSubmit} variant="primary" type="submit">Submit</Button>
</Form>
</div>
</Col>
</Row>
</Container>
</div>
)
Here is my convert.js file:
function Convert(props) {
console.log(props.file);
return (
<div>
<Container>
<Row style={{marginTop:"15vh"}}>
<Col>
<h1>Converting...</h1>
</Col>
</Row>
<Row style={{marginTop:"10vh"}}>
<Col>
<ProgressBar animated now={100} />
<div id="file">
aa
</div>
</Col>
</Row>
</Container>
</div>
)
}

I solved the problem myself. It was about sync code. When I try to console.log(props.file) actually there is a props.file const in my App.js but because of the execution time It seems null. Because as I understand js starts executing the next code line before current line execution ends. Actually props.file gets the value that I want but js logs it before the assignment. I used await and fixed it

'Row' cannot be used as a JSX component. Its instance type 'Row' is not a valid JSX element. TS2786

I am new to Typescript and working on a project started by someone else. Is this a version issue or some other issue with the code? I am using Node version v14.19.11. Although the application loads but the page doesn't work on edit/click text fields.
Code
import React from "react";
import { Table, Row, Col, Spinner, Button, Card, CardHeader, CardBody, FormGroup, Label, Input, Alert } from "reactstrap";
import Moment from "react-moment";
import { Asset } from "./api/platform-assets-api";
import AttributeEditForm from './forms/AttributeEditForm';
import AttributeListComponent from './AttributeListComponent';
export const AssetDetailComponent = ({ data, handlers, lastActionStatus }) => {
console.log(data);
const asset: Asset = data;
const error = '';
const addAttrProps = { currentAttrs: asset && asset.details, handleAction: handlers.handleAddAttr };
const attrListProps = { currentAttrs: asset && asset.details, handleAction: handlers.handleDeleteAttr };
return (
<div className="animated fadeIn">
<Row>
<Col>{error}</Col>
</Row>
<Row>
<Col></Col>
<Col>
</Col>
<Col>
<div className="mb-3 float-right">
<Button color="secondary" className="mr-2">
<span>
<i className={"fa fa-refresh"} />
</span>
</Button>
<Button color={"primary"} onClick={handlers.handleOnboard}>
Start onboarding...
</Button>
<Button className="ml-2" color={"primary"} onClick={handlers.handleEdit}>
Edit
</Button>
<Button className="ml-2" color={"primary"} onClick={handlers.handleClone}>
Clone
</Button>
<Button className="ml-2" color={"primary"} onClick={handlers.handleDelete}>
Delete
</Button>
</div>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardHeader>
<i className="fa fa-info" />
<strong>{asset && asset.name}</strong> (Id:{" "}
{asset && asset.id})
</CardHeader>
<CardBody>
<Row className="pt-3">
<Col
sm={4}
className="border border border-top-0 border-bottom-0 border-left-0"
>
<dt>Description</dt>
<dd>
{asset && asset.description}
</dd>
</Col>
<Col
sm={4}
className="border border border-top-0 border-bottom-0 border-left-0"
>
<dt>Active</dt>
<dd>
{asset && asset.status}
</dd>
</Col>
<Col sm={4}>
<dt>Created</dt>
<dd>
{asset && asset.createdAt}
</dd>
<dt>Updated</dt>
<dd>
{asset && asset.updatedAt}
</dd>
</Col>
</Row>
<Row>
<Col sm={12}>
<p>{lastActionStatus}</p>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<AttributeEditForm {...addAttrProps} />
</Col>
</Row>
<Row>
<Col xs={12}>
<AttributeListComponent {...attrListProps} />
</Col>
</Row>
</div>
);
};
When I do a yarn start I end up with the below Error however the page loads fine at http://localhost:3000/ although the text-fields are not clickable and data couldn't be entered.
Error Observed
Failed to compile.
/Users/roy.pk/platan-cac/src/platform/AssetDetailComponent.tsx
TypeScript error in /Users/ranopriyo.neogy/platan-cac/src/platform/AssetDetailComponent.tsx(16,14):
'Row' cannot be used as a JSX component.
Its instance type 'Row' is not a valid JSX element. TS2786
14 | return (
15 | <div className="animated fadeIn">
> 16 | <Row>
| ^
17 | <Col>{error}</Col>
18 | </Row>
19 | <Row>

'Container' cannot be used as a JSX component.
Its instance type 'Container' is not a valid JSX element.

Why the warning: Unknown event handler property `onSession` is displayed in React app?

I'm pretty new to React, I have an simple app where the user can login via modal window that is displayed when the button "Login" it's clicked. User data is stored in a MongoDB collection, to validate the email and password entered by the user in the modal window the app send a request to a service that returns the data of the logged user or nothig if any error happens. If the user exists, the id is stored in local storage, then it must be redirected to another page. The problem is that apparently the method 'onSession' does not exist thus generating the warning: "Unknown property of the event handler onSession".
I have created three components: "LoginForm.js", "LoginModal.js" and "Menu.js". The first has the fields for the email and password and the validations for the login, the second has the properties of the modal window and the last one is for a navigation bar where the "Login" button is displayed.
LoginForm.js:
import React from 'react';
import { Col, Row, Form, Stack, Button, Image } from 'react-bootstrap';
import LoginIMG from '../../../assets/login.png'
import './LoginForm.css';
class LoginForm extends React.Component{
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
if(this.state.email === '' || this.state.password === '') {
alert('You must fill all inputs');
}else{
fetch('http://localhost:8080/api/user/'+this.state.email+'/'+this.state.password)
.then(res => res.json())
.then(data => {
if(data.id !== null) {
localStorage.setItem('idUser', data.id);
this.props.onHide();
this.props.onSession();
}else{
alert('Wrong password or username');
}
});
}
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<div className="form">
<br />
<Row className="justify-content-md-center">
<Form onSubmit={this.handleSubmit}>
<Stack gap={3}>
<Row className="justify-content-md-center">
<Col lg={6} md={4} className='text-center'>
<Image src={LoginIMG} className="avatar" roundedCircle />
</Col>
</Row>
<Row className="justify-content-md-center">
<Col lg={6}>
<Form.Group controlId="formEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" name="email" value={this.state.email} onChange={this.handleChange} placeholder="Enter email" />
</Form.Group>
</Col>
</Row>
<Row className="justify-content-md-center">
<Col lg={6}>
<Form.Group controlId="formPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" name="password" value={this.state.password} onChange={this.handleChange} />
</Form.Group>
</Col>
</Row>
<Row className="justify-content-md-center">
<Col lg={6} className="d-grid gap-2">
<Button type="submit" variant="success" size="lg">Login</Button>
</Col>
</Row>
</Stack>
</Form>
</Row>
</div>
);
}
}
export default LoginForm;
LoginModal.js:
import LoginForm from '../../forms/loginForm/LoginForm'
import { Modal } from 'react-bootstrap';
import './LoginModal.css';
function LoginModal(props){
return (
<Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{props.title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<LoginForm onHide={props.onHide} />
</Modal.Body>
<Modal.Footer>
{/* <Button onClick={props.onHide}>Close</Button> */}
</Modal.Footer>
</Modal>
);
}
export default LoginModal;
Menu.js:
import React from 'react';
import {Navbar, Nav, Container} from 'react-bootstrap';
import { Link } from "react-router-dom";
import LoginModal from '../../modals/loginModal/LoginModal';
import { useState } from 'react';
function Menu(){
const [modalShow, setModalShow] = useState(false);
const [idUser, setIdUser] = useState(0);
const setSession = () => {
if(localStorage.getItem('idUser') != null){
setIdUser(localStorage.getItem('idUser'));
console.log(idUser);
}
}
return(
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container>
<Link className='navbar-brand' to="/">Divina Comedia</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Link className='nav-link' to="/">Home</Link>
{idUser === 0 ? <Nav.Link id="login" onClick={() => setModalShow(true)}>Login</Nav.Link> : null }
{idUser !== 0 ? <Link className='nav-link' to="/orders">Orders</Link> : null }
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<LoginModal show={modalShow} onHide={() => setModalShow(false)} onSession={() => setSession()} />
</>
);
}
export default Menu;
I'm really don't know what is wrong, any help is appreciated.

onSession={() => setSession()}
This gets passed into LoginModal, which then passes it into Modal here in LoginModal.js:
<Modal {...props}
And Modal ultimately ends up putting it on a <div>. There is no dom event with that name, and thus you are getting the error.
If that prop is intended for LoginModal, then make sure you deal with it there, and don't pass it on to Modal using the spread syntax. For example:
function LoginModal({ onSession, ...rest }){
// Do something with the onSession prop
return (
<Modal {...rest} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
// Or maybe do something with it here?
)
}

Show or hide elements based on url parameters in react.js

I have a navbar and based on the url parameters I want to show different elements on that navbar such as user items, Edit settings etc. Right now I have a Connect to wallet button and when the url has /wallet in it i want to hide that button.
I tried using useParams() from react-router-dom but as a beginner how I can't figure it out where do I put conditions so that it shows or hides based on that Url parameters.
Here's my code
import React, { useState } from "react";
import { Nav, Navbar, Button, Modal, Form } from "react-bootstrap";
import { Link } from "react-router-dom";
function NavbarTop() {
const [showLogin, setShowLogin] = useState(false);
const [showSignup, setShowSignup] = useState(false);
//handler for login
const handleCloseLogin = () => setShowLogin(false);
const handleShowLogin = () => setShowLogin(true);
//handler for signup
const handleCloseSignup = () => setShowSignup(false);
const handleShowSignup = () => setShowSignup(true);
return (
<Navbar className="navBar" variant="dark" expand="lg" sticky="top">
<Navbar.Brand>
<Link to="/">
<img src="images/logo.png" alt="playtoshi" className="logo" />
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto mr-md-3">
<Nav.Link href="#home">MARKETPLACE</Nav.Link>
<Nav.Link href="#link">COMMUNITY</Nav.Link>
<Nav.Link href="#link" className="mr-md-2">
HELP
</Nav.Link>
//I want to hide this button if the url has /wallet in it
<Link to="/wallet">
<Button variant="outline-warning">Connect your wallet</Button>{" "}
</Link>
</Nav>
<Button
variant="outline-primary"
className="mr-sm-2"
onClick={handleShowLogin}
>
Login
</Button>{" "}
<Button variant="outline-success" onClick={handleShowSignup}>
Sign Up
</Button>{" "}
</Navbar.Collapse>
{/* Login Modal */}
<Modal show={showLogin} onHide={handleCloseLogin} animation={false}>
<Modal.Header closeButton>
<Modal.Title>Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" required />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" required />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseLogin}>
Close
</Button>
</Modal.Footer>
</Modal>
{/* Signup modal */}
<Modal show={showSignup} onHide={handleCloseSignup} animation={false}>
<Modal.Header closeButton>
<Modal.Title>Signup</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group>
<Form.Label>Enter Your Name</Form.Label>
<Form.Control
type="text"
placeholder="First Name"
required
className="mb-sm-2"
/>
<Form.Control type="text" placeholder="Last Name" required />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" required />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" required />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Retype Password"
required
/>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check
type="checkbox"
label="I Agree the terms and conditions"
/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseSignup}>
Close
</Button>
</Modal.Footer>
</Modal>
</Navbar>
);
}
export default NavbarTop;

I hope it works, try this
const currentPath = this.props.location.pathname
const walletPath = '/wallet'
const className = currentPath === walletPath ? 'hideThisButton' : '';
/* if you want to check that current path includes the wallet path try
* "currentPath.includes(walletPath)"
* instead of "currentPath === walletPath"
*/
return (
//...
<Link to="/wallet">
<Button className={className} variant="outline-warning">Connect your wallet</Button>{" "}
</Link>
//..
)
and add this to css
.hideThisButton { display: none; }

In React you can use useLocation() from react-router-dom to get the actual pathname
import { useLocation } from 'react-router-dom';
const walletPath = '/wallet'
const [hide, setHide] = useState(useLocation().pathname === walletPath ? true : false);
return (
//....
{ !hide ? (
<Link to = "/wallet" >
<Button variant = "outline-warning" > Connect your wallet </Button>
</Link>
) : null }
);

Avoid elements to move separately on browser resize in a React Form

I'm struggling with the following form done in React:
import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import { Container, Row, Col, InputGroup, Button, FormControl, Form } from 'react-bootstrap';
const images = [
{
original: '/assets/images/products/colgantes.png',
thumbnail: '/assets/images/products/colgantes#0.25x.png',
},
{
original: '/assets/images/products/corazones.png',
thumbnail: '/assets/images/products/corazones#0.25x.png',
},
{
original: '/assets/images/products/take-me-to-the-beach.png',
thumbnail: '/assets/images/products/take-me-to-the-beach#0.25x.png',
},
];
class DetailedProduct extends Component {
render() {
return (
<>
<Container fluid>
<Row >
<Col md={{ span: 4, offset: 3 }} sm={{ span: 12, offset: 0}} >
<ImageGallery
items={images}
showNav=""
showFullscreenButton=""
showBullets=""
showPlayButton=""
thumbnailPosition="left"
/>
</Col>
<Col md={3} sm={12} className="text-xs-center text-md-left" >
<h1>Product</h1>
<h3>$500</h3>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industrys</p>
<Form>
<Row >
<Col sm={12} md={8} >
<Form.Group controlId="color" >
<Form.Label>Color</Form.Label>
<Form.Control as="select" custom>
<option>Rojo</option>
<option>Negro</option>
<option>Azul</option>
</Form.Control>
</Form.Group>
</Col>
<Col sm={12} md={4} className="inline-block">
<Form.Group controlId="cantidad" >
<Form.Label>Cantidad</Form.Label>
<InputGroup >
<InputGroup.Prepend>
<Button variant="outline-secondary" >+</Button>
</InputGroup.Prepend>
<FormControl
placeholder="1"
aria-label="quantity"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button variant="outline-secondary" >-</Button>
</InputGroup.Append>
</InputGroup>
</Form.Group>
</Col>
</Row>
</Form>
</Col>
</Row>
</Container>
</>
);
}
}
export default DetailedProduct;
The problem I have is that when I resize the Browser Window, the appended buttons in the input, start to move down to a different row separately, breaking the [+ 1 -] block. I've tried applying different CSS to the form group but I can't find a way to tighten them together so that if they move, they move in a block and the following thing doesn't happen:

You can try adding the rule for the minimum size:
min-width: 150px;
150px is an example size.
Unfortunately I don't know the width size that input should have.
To the class that contains the three elements, input-group, in that case. I advise you to add a class and apply additional styles to that.

Thanks, I was able to fix it by using the right flex column sizes for the scren resolution, sm={12} md={6} lg={4} - That did the trick