I'm a noob and I'm trying to compile a JSX following this tutorial :
http://xabikos.com/2015/03/18/Using-Reactjs-net-in-Web-Forms/
using reactjs.net
I'm trying to define a class like this...
class First extends React.createClass {
render(){
}
constructor(props) {
}
componentDidMount() {
}
}
Render method seems to work fine, but componentDidMount is not called,
and the constructor is also never called, any idea why is this happening?
You Are mixing The concept of function based components and class-based components, You can not use createClass while using class-based Components, That's why you are not getting what you desire.
The right way to make a component using class is this:-
import React from 'react';
class First extends React.Component{
constructor(props) {
super(props);
}
componentDidMount() {
}
render(){
}
}
And When You have to make components Using plain functions You have to use this:-
var First = React.createClass({
render:function(){
//Your view
}
})
I Hope it will solve your problem
Related
I have created a simple datepicker component based on react-dates and implemented as per documentation at https://github.com/airbnb/react-dates
The datepicker seems to be working however the calendar styling is completely broken when clicking on the datepicker field
The datepicker code:
import React, { Component } from 'react';
import moment from 'moment';
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
export default class DatePicker extends Component {
constructor(props) {
super(props);
this.state = {
selectedStartDate: moment(),
calendarSelectedStartDate: false
}
}
onDateChange = (selectedStartDate) => {
this.setState(() => ({ selectedStartDate }));
};
onFocusChange = ({ focused }) => {
this.setState(() => ({ calendarSelectedStartDate: focused }));
};
render() {
return (
<SingleDatePicker
date={this.state.selectedStartDate}
onDateChange={this.onDateChange}
focused={this.state.calendarSelectedStartDate}
onFocusChange={this.onFocusChange}
numberOfMonths={1}
isOutsideRange={() => false}
/>
)
}
}
Implementation is just call to :
<DatePicker />
outside of any parent html tags that could affect it.
The styling looks like this:
Ok i found an answer for this problem, so:
Are you trying to render the calendar inside another element that is not always visible, right?
Well, if you are doing that, in the parent component you must have an state like "isOpen" or something like that. Then, when you call the Picker component, must be like:
{isOpen && <DatePicker />}
I spent like two hours searching this solution. I hope that make sense for you.
Hi I am building one next js app
I have build component components/search_location.js
constructor(props) {
super(props);
this.state = {locations: props.locations};
}
export default function SearchLocation({locations}){
return(
<div>
<h1></h1>
</div>
)
}
But with above code I am getting error saying
SyntaxError: /Users/search_project/components/search-location.js: Unexpected token, expected ";" (4:17)
export default function SearchLocation({locations}){
constructor(){
^
this.state = {
data: 'www.javatpoint.com'
}
I want to set state and then onclick of some button I want to change state as well, Can someone please suggest me how to do this?
You have a syntax error, constructor is something that is available only in javascript classes.
You should change your exported component from functional component to class component.
It should looks like this:
import React from 'react';
export default class extends React.Component {
constructor() {
this.state = {
data: 'www.javatpoint.com',
};
}
render() {
return <div>Content here</div>;
}
}
I've got things working well with React-JSS: https://cssinjs.org/react-jss
The CSS styles are stored in an external file, styles.js. A classes object is then instantiated in the top-level component like this:
import injectSheet from 'react-jss';
import styleSheet from './styles.js';
class UserMgmtPage extends React.Component {
constructor(props) {
super(props);
}
render() {
const { classes } = this.props;
return (
<UsersProvider>
<AddUsers classes={classes} />
</UsersProvider>
</div>
);
}
}
const styledComponent = injectSheet(styleSheet)(UserMgmtPage);
const mapStateToProps = (state) => ({
session: state.session,
});
export default connect(mapStateToProps)(styledComponent);
The "problem" is that classes needs to be passed down from component to sub-component to sub-sub-component through prop drilling. I would like to avoid doing this and instead independently utilize classes in each sub-component that needs it - kind of like the way a React Context can be imported into any component, avoiding prop drilling.
I've tried several things but none work. Might anyone know of an approach that would work to accomplish this?
im trying to create a new lit element component extending from other component
but render method don´t works.
the component is empty..
export default class ChildComponent extends FatherComponent {
static get styles() {
return css`
:host {
display: block;
}`;
}
render() {
return html`<h1>Hi</h1>`;
}
}
window.customElements.define('child-component', ChildComponent);
I had the same kind of issue today. It seems that render() was not triggered.
To solve my issue I had to call super.connectedCallback() in the connectedCallback() methods for both child and parent.
I also call super() in the constructor.
Hope that helps.
Problem:
I have built an angular application. There I want to add a CSS class to the body whenever It navigates to that components and remove it whenever the user leaves out of that component.
This is what I have done. In the global CSS file, I have defined a style like this.
.background-color {
background-image: linear-gradient(to right,#3f51b5, #00bcd4) !important;
}
And In the login component, I have done something like this.
import { Component, OnInit } from "#angular/core";
#Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
constructor() {
}
ngOnInit() {
window.onload = function() {
document.body.classList.add("background-color");
};
}
}
But this is not working correctly. When I navigate to this component the styles not added but when I refresh the pages it adds the styling to the body. I tried a lot to find a solution to this problem but I was unable to do so. Can someone help me to solve this issue? Thank you!
No need to write onLoad function inside the ngOnInit() method. I suggest you read the angular official ngOnit().
rewrite your ngOnInit() like below
ngOnInit() {
let element = document.getElementById("bg-color");
element.classList.add("background-color");
}
and your component.html file
<p id="bg-color">
Start editing to see some magic happen :)
</p>
Live Demo
Since you are using angular routing, this will not work unless you navigate to that component manually, because when you navigate to a router link, it does not reload the application, it justs removes the other components and add the new component. It does not trigger the onLoad event. But when you reload manually, it will work.
try the following
export class LoginComponent implements OnInit {
loaded: boolean = false;
constructor() {
}
ngOnInit() {
this.loaded = true;
}
and on the component html
<body [class.background-color]="loaded"></body>
or something on the similar lines.