I was changing functional components to class components and I ran up
to a problem. My scss was gone after updating the code. Before
refactoring my functional component into class component everything
was working fine in scss but then it's just like I haven't even
imported styles.scss file in my index.js. But as you can see it is
imported.
import React, {Component}from 'react';
import './styles.scss';
class FormInput extends Component {
constructor(handleChange, label, ...otherProps) {
super(handleChange, label, ...otherProps);
}
render(){
return (
<div className="formRow">
{this.label && (
<label>
{this.label}
</label>
)}
<input className="formInput" onChange={this.handleChange} otherProps />
</div>
);
} };
export default FormInput;
Related
I am trying to replicate TextField example from material-ui this is how is suppose to be
This is how should be
but i got this
[marks in red is to show extra line that all TextFiel has2
do you know the reasons?
Please write a component like TextFieldExample and use this in app Component.
import React from 'react';
import TextField from '#material-ui/core/TextField';
export default function TextFieldExample(props) {
return (
<TextField id="standard-basic" label={props.label} variant={props.variant} />
);
}
Here is the App Component Code that includes how you can use TextFieldExample Component. Here you can pass label and variant as an props and use it in TextFieldExample Component
import React from "react";
import ReactDOM from 'react-dom'
import TextFieldExample from "./TextFieldExample";
class App extends React.Component {
render() {
return (
<div>
<TextFieldExample label="Standard"/>
<TextFieldExample label="Filled" variant="filled" />
<TextFieldExample label="Outlined" variant="outlined" />
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
export default App;
I include the output image for your understanding.
In react, I am trying to use react hooks.I have created one hook which contains a form and I am importing that in class based component and rendering it there. But hooks is not rendering in contact component
//contactushook.js
import React from 'react';
const contactUshook = props => {
return <React.Fragment>
<form>
<div>
<input id="name" type="text" placeholder="enter the name"></input>
</div>
<div>
<input id="email" type="email" placeholder="enter the email"></input>
</div>
<div>
<input id="message" type="text-area" placeholder="Type message here"></input>
</div>
<button type="submit">Submit</button>
</form>
</React.Fragment>
}
export default contactUshook;
//contact.js
import React, { Component } from 'react';
import contactUshook from './hooks/contactushook';
class ContactComponent extends Component {
render() {
return (
<div>
<h4>hook</h4>
<contactUshook></contactUshook>
</div>
);
}
}
export default ContactComponent;
Your code is pretty working. You've should name your custom component <contactUshook> starting with capital letter, so React knows that it is custom component and not html tag.
Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.
So this will fix you issue
import React, { Component } from 'react';
import ContactUshook from './hooks/contactushook';
class ContactComponent extends Component {
render() {
return (
<div>
<h4>hook</h4>
<ContactUshook></ContactUshook>
</div>
);
}
}
export default ContactComponent;
And as already mentioned, your code does not deal with hooks. You created ordinary components.
Working sample is here
I am able to import the svg in the parent component App.js(in the src folder) but not in the child component Home.js(src/components/Home.js)
When I import directly into the parent component the svg displays perfectly but if I import in the child component it says
Module not found: Can't resolve './img/BulbOn.svg' in 'E:\Website Work\Current Work\parsa_ventures\src\components'
import './App.css'
import Home from './components/Home'
function App() {
return (
<div>
<Home />
</div>
)
}
export default App
import BulbOn from './img/BulbOn.svg'
class Home extends React.Component {
render() {
return (
<div>
<img src={BulbOn} alt="text" />
</div>
)
}
}
export default Home
I am new to react so I am wondering if I can easily import svg in child component without having to use props.
my folder structure paths,
Website Work/Current Work/parsa_ventures/src/App.js (Parent)
Website Work/Current Work parsa_ventures/src/components/Home.js (Child) Website Work/Current Work/parsa_ventures/src/img/BulbOn.svg (Image)
i put the react boilerplate inside parsa_ventures, so thats where the src is containing all the files
you are using ./img which means E:\Website Work\Current Work\parsa_ventures\src\components\img\BulbOn.svg should exist.
please check your paths,
you need to put ./../img/BulbOn.svg should work.
try below code,
import BulbOn from './../img/BulbOn.svg'
class Home extends React.Component {
render() {
return (
<div>
<img src={BulbOn} alt="text" />
</div>
)
}
}
export default Home
Check your path from the child component as it seems you have missed one folder and then try.
Also, you can pass the svg image from parent to child component.
import React from 'react';
import Logo from '../../logo.svg';
class Test extends React.Component {
render() {
return (
<div>
<img src={this.props.url} alt="text" />
</div>
)
}
}
export default Test
In parent component, pass svg path url to child component - Test.
<Test url={Logo} />
I have a react component that will throws an error when I try to dispatch a redux action. Here is the component:
import React from 'react';
import { connect } from 'react-redux';
import { createBook } from './actions/books';
import './InputForm.css';
export class InputForm extends React.Component {
onFormSubmit(event) {
event.preventDefault();
let newBook = {
title: this.titleInput.value,
author: this.authorInput.value,
description: this.descriptionInput.value
}
this.props.dispatch(createBook(newBook));
}
render() {
return (
<div>
<form onSubmit={event => this.onFormSubmit(event)}>
<input className="form-input" placeholder="Title" ref={input => this.titleInput = input} />
<input className="form-input" placeholder="Author" ref={input => this.authorInput = input} />
<input className="form-input form-text-area" placeholder="Description" ref={input => this.descriptionInput = input} />
<button className="form-button" type="submit">Submit</button>
</form>
</div>
)
}
}
export default connect()(InputForm);
This is the line that creates the problem:
this.props.dispatch(createBook(newBook));
I'm not sure what's going on. Here is the error I get:
Uncaught TypeError: this.props.dispatch is not a function
at InputForm.onFormSubmit (InputForm.js:15)
at onSubmit (InputForm.js:21)
at HTMLUnknownElement.callCallback
I have another component set up almost identically using a different action. It works fine. Here is that component if anyone wants to compare:
import React from 'react';
import './Book.css';
import { deleteBook } from './actions/books';
import { connect } from 'react-redux';
export class Book extends React.Component {
onDelete(event) {
this.props.dispatch(deleteBook(this.props.id));
}
render() {
return (
<div className="book-container">
<h4>{this.props.title}</h4>
<p>{this.props.author}</p>
<p>{this.props.description}</p>
<p>{this.props.id}</p>
<button className="book-delete-button" onClick={event => this.onDelete(event)}>Delete</button>
</div>
)
}
}
export default connect()(Book);
Dunno what's going on here. Please help!
Seems like there at least 2 issues here that can cause a problem.
It depends on how you import the components. You are exporting 2
components in each module:
A named export (the component)
And a default export (the new connected component).
If you import the named export:
import { InputForm } from './path';
You will not have the redux related props as this is not the
connected component.
This is why one of your other connected components is working fine even though it seems to have the same code and structure pattern.
You probably import it the way you should (default import).
Make sure you import the default component:
import InputForm from './path';
Another thing that caught my eye, is that you are not binding the
event handler onFormSubmit, so i expect the this to be the
element that triggered the event. Though i think if that was the
issue, you would get a different error anyway.
I had imported the disconnected version in the container component. Stupid mistake.
I'm new to React. I'm much more familiar with Angular2+. In Angular, every component has a separate html file. However, in React, I see that render function itself includes the html template. For example,
import React, { Component } from 'react';
class HelloWorld extends Component {
render() {
return (
<h2> Hello World </h2>
);
}
}
export default HelloWorld;
Well I want to take
<h2> Hello World </h2>
outside the js file and put it in a separate html and import the html file to render function, for example
render() {
return (
import content of helloworld.html
);
}
Do you know how to do it?
In React you would typically make a child component and import it into the parent component.
Since your child component here would just be static markup i.e <h2>Hello World</h2>, you don't need to worry about component state.
Therefore, you could do the following:
make a functional (aka stateless or dumb) component for your text. You could name it HelloWorldText as an example.
import this functional component into your parent component HelloWorld.
Your functional component would look something like this:
HelloWorldText.js
const HelloWorldText = () => ( <h2> Hello World </h2> );
export default HelloWorldText;
Then you would import this functional component HelloWorldText into your parent component HelloWorld like so:
HelloWorld.js
import React, { Component } from 'react';
import HelloWorldText from './path/to/HelloWorldText';
class HelloWorld extends Component {
render() {
return (
<HelloWorldText />
);
}
}
export default HelloWorld;
Here's a CodePen Demo with this code.
Unfortunately on CodePen you can't export and import components, but hopefully it still gives you an idea on how to use a child component inside a parent component.
Note: In React you want your components to be as general as possible. You would probably end up making a Text component instead of a HelloWorldText component.
Then you would pass text dynamically into the Text component using props.
Here is a CodePen Demo of this in action.
You can move the JSX part into a separate file and import that file in your component class
Here's an example
Signin.jsx
import React from 'react';
export const SigninJsx = () => {
return (
<div className="container">
<form className="form-signin">
<h2 className="form-signin-heading"> Please sign in </h2>
<br />
<label htmlFor="inputEmail" className="sr-only"> Email address
</label>
<input type="email" id="inputEmail" onChange={this.handleEmailChange} className="form-control" placeholder="Email address" required autoFocus />
<br />
<label htmlFor="inputPassword" className="sr-only"> Password</label>
<input type="password" id="inputPassword" onChange={this.handlePasswordChange} className="form-control" placeholder="Password" required />
<br />
<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button"> Sign in
</button>
</form>
</div>
)
}
Signin.js
import React, { Component } from 'react';
import {SigninJsx} from './Signin.jsx';
export class Signin extends Component {
constructor(props){
super(props);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.state = {
email:'',
password:''
};
this.signIn = this.signIn.bind(this)
}
handleEmailChange(e){
this.setState({email:e.target.value})
console.log("Error Change");
}
handlePasswordChange(e){
this.setState({password:e.target.value})
}
signIn(){
alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);
}
render() {
return (
<SigninJsx />
)
}
}
Please checkout this Medium link
This will be your React component declaration and
you need to import the template.js file inside here and render it in context of the component 'Abc' (index.jsx):
import template from './template';
export default class Abc extends React.Component {
render() {
return template.call(this)
}
}
Separate js file will have template as follows (template.js):
import styles from './styles.module.css';
const template = () => (
<div className={styles.outerContainer}>
<div className={styles.middleContainer}>
<div className={styles.innerContainer}>Hello, World</div>
</div>
</div>
);
export default template;
Additionally, we can import CSS modules inside the template and maintain them in serapate file as well, as follows (styles.module.css):
.outerContainer {
backgroundColor: red;
}
/* etc... etc... */
for now , it is not possible to load template from html file.