I am trying to use reactstrap for a react project yet not successful. Here is the code.
// React
import React, { Component } from "react";
import {
Card,
CardBody,
CardTitle,
Row,
Col,
InputGroup,
InputGroupAddon,
InputGroupText,
Input
} from "reactstrap";
// Style
import "./App.scss";
class App extends Component {
render() {
return (
<div className="App">
<Card>
<CardBody>
<CardTitle>Badges Scale to Parent</CardTitle>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Input
addon
type="checkbox"
aria-label="Checkbox for following text input"
/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Check it out" />
</InputGroup>
<input placeholder={"email"} />
<input placeholder="name" />
<input placeholder="mail" />
<button>Send</button>
</CardBody>
</Card>
</div>
);
}
}
I have hosted the app on codesandbox and here is the link. I am expecting the look of the inputs to be exactly as the documentation but when implemented they look like regular input fields without any style. Here is the documentation page for reactstrap link. What am I missing?
On the documentation, the first page says to import the Bootstrap CSS.
Import Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
This gives you the styles. Preview here.
CodeSandbox: https://codesandbox.io/s/client-x8dz3
Related
I created an app using create react app. I added a functional component named Signup which is called from App.js. And I am getting an error on screen. It says I am not exporting component properly. I could not understand what is wrong. I am putting the three component files here.
Here is my file structure
Signup.js
import React, { useRef } from 'react'
import {Card, Form, Button} from 'react-bootstrap';
export default function Signup() {
const emailRef = useRef();
const passwordRef = useRef();
const passwordConfirmRef = useRef();
return (
<>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Sign up</h2>
<Form>
<Form.Group id="email">
<Form.label>Email</Form.label>
<Form.Control type="email" ref={emailRef} required />
</Form.Group>
<Form.Group id="password">
<Form.label>Email</Form.label>
<Form.Control type="password" ref={passwordRef} required />
</Form.Group>
<Form.Group id="password-confirm">
<Form.label>Confirm Password</Form.label>
<Form.Control type="password" ref={passwordConfirmRef} required />
</Form.Group>
<Button className="w-100" type="submit">Sign Up</Button>
</Form>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
Already have an account? Login
</div>
</>
)
}
App.js
import React from 'react';
import './App.css'
import Signup from './components/Signup'
export default function App() {
return (
<div className="App">
<Signup/>
</div>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Folder Structure
src (folder)
- App.js
- index.js
-- components (folder)
--- Signup.js
Error
It seems that <Form.label> isn't the correct syntax in the react-bootstrap documentation, and I suspect that this is what's causing the element type is invalid error.
Trying changing it to <Form.Label>
I've created a component (in spotifyPlaylist.js) and as the first step I am trying to have the app show this component as a list box next to others, however this new component doesn't even show when I inspect the page (screenshot below). I'm a newbie so any feedback helps, thank you!
Created the component in ./spotifyList/spotifyList
import './spotifyPlaylist.css';
export class spotifyPlaylist extends React.Component {
render() {
return (
<div className="spotifyPlaylist">
<input defaultValue="Existing Playlist" />
</div>);}}
Imported it in App.js (it's the main file)
import { spotifyPlaylist } from '../spotifyPlaylist/spotifyPlaylist';
Added into the App component's render.
...
render() {
return (
<div>
<div className="App">
<SearchBar onSearch={this.search} />
<div className="App-playlist">
<SearchResults
onAdd={this.addTrack}
searchResults={this.state.searchResults}
/>
<Playlist
playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}
/>
<spotifyPlaylist />
</div>
</div>
</div>
</div>
);
}
}```
In react component names have to start with a capital letter to be used in jsx, so ether rename it on the import:
import { spotifyPlaylist as SpotifyPlaylist } from '../spotifyPlaylist/spotifyPlaylist';
AND
<SpotifyPlaylist />
OR rename it all together
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!
I was trying to create a login page using react native and native-base. I did follow the instructions from the docs but I still got an error in my coding, Would you guys help me to find where I made wrong at? Thx
Here is my code:
import React, { Component } from "react";
import { View, StatusBar } from "react-native";
import {
Container,
Content,
Form,
Item,
Input,
Label,
Button,
Text
} from "native-base";
class Customerlogin extends Component {
render() {
return (
<Container>
<View>
<StatusBar backgroundColor="#EE5FD6" barStyle="light-content" />
</View>
<Content>
<Form>
<Item floatingLabel>
<Label> Username </Label> <Input />
</Item>
<Item floatingLabel last>
<Label> Password </Label> <Input />
</Item>
</Form>
<Button rounded warning>
<Text> Sign In </Text>
</Button>
</Content>
</Container>
);
}
}
export default Customerlogin;
Thx b4.
I'm using Filter Input from blueprintjs in a reactjs project, but the style doesn't load correctly, here's my code:
Assigning.jsx
import './Assigning.scss';
export default class Assigning extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
Assigning.scss
#import '~#blueprintjs/core/lib/css/blueprint.css';
#import '~#blueprintjs/icons/lib/css/blueprint-icons.css';
is ~ character required at the beginning of import ?
It works with me with the following imports
import "#blueprintjs/table/lib/css/table.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
The full code for the component is
import React, { Component } from 'react';
class TestComponent extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
export default TestComponent;
I got the following output