How to access the state variable testState from the different class UserAuthentication?
I have tried this without success:
import React from 'react';
import UserAuthenticationUI from './UserAuthentication/UserAuthenticationUI';
class App extends React.Component {
constructor(props) {
super(props);
this.userAuthenticationUI = React.createRef();
this.state={
testState: 'test message'
}
}
render() {
return(
<div>
<UserAuthenticationUI ref={this.userAuthenticationUI} />
<div>
)
}
}
export default App;
How to access this.state.teststate from class UserAuthenticationUI?
import React from "react";
import App from '../App';
class UserAuthenticationUI extends React.Component {
constructor(props) {
super(props);
this.app = React.createRef();
}
render() {
return(
<div>
<App ref={this.app} />
{console.log(this.state.testState)}
</div>
)
}
}
export default UserAuthenticationUI;
You need to pass it via props.
import React from "react";
import UserAuthenticationUI from "./UserAuthentication/UserAuthenticationUI";
class App extends React.Component {
constructor(props) {
super(props);
this.userAuthenticationUI = React.createRef();
this.setParentState = this.setParentState.bind(this);
this.state = {
testState: "test message"
};
}
setParentState(newStateValue){ // this is called from the child component
this.setState({
testState: newStateValue
})
};
render() {
return (
<div>
<UserAuthenticationUI
stateVariable={this.state.testState}
ref={this.userAuthenticationUI}
setParentState={this.setParentState}
/>
</div>
);
}
}
export default App;
UserAuthenticationUI:
import React from "react";
import App from "../App";
class UserAuthenticationUI extends React.Component {
constructor(props) {
super(props);
this.app = React.createRef();
this.onClick = this.onClick.bind(this);
}
onClick(){
const newStateValue = 'new parent state value';
if(typeof this.props.setParentState !== 'undefined'){
this.props.setParentState(newStateValue);
}
}
render() {
const stateProps = this.props.stateVariable;
return (
<div>
<App ref={this.app} />
<div onClick={this.onClick} />
{console.log(stateProps)}
</div>
);
}
}
export default UserAuthenticationUI;
You should think differently.
Try to read the variable via GET methods and set via SET methods.
Do not try to call the variable immediately
Hope this helps.
you can pass it through Props:
import React from 'react';
import UserAuthenticationUI from
'./UserAuthentication/UserAuthenticationUI';
class App extends React.Component {
constructor(props) {
super(props);
this.userAuthenticationUI = React.createRef();
this.state={
testState: 'test message'
}
}
render(){
return(
<div>
<UserAuthenticationUI testState={this.state.testState} />
<div>
)}
}
export default App;
UserAuthenticationUI:
import React from "react";
import App from '../App';
class UserAuthenticationUI extends React.Component
{
constructor(props){
super(props);
}
render(){
return(
<div>
<App/>
{console.log(this.props.testState)}
</div>
)}
}
export default UserAuthenticationUI;
You can access it via props:
<div>
<UserAuthenticationUI testState={this.state.testState} ref={this.userAuthenticationUI} />
<div>
and in UserAuthenticationUI class access it:
<div>
<App ref={this.app} />
{console.log(this.props.testState)}
</div>
Related
I am trying to over ride some function of a prime react button component but i am getting this error while extending prime react button component class.
Here is my code:
import { Button } from "primereact/button";
class BtnBox extends Button {
constructor(props) {
super(props);
this.renderLabel = this.renderLabel.bind(this);
}
renderLabel() {
return <span>icon</span>;
}
}
class IconButton extends React.Component {
render() {
return (
<div className="icon-button">
<BtnBox {...this.props} />
</div>
);
}
}
export default IconButton;
can you try this form ?
import { Button } from "primereact/button";
class BtnBox extends Button {
constructor(props) {
super(props);
}
render = () => <span>{this.props.name}</span>;
}
class IconButton extends React.Component {
render() {
return (
<div className="icon-button">
<BtnBox name='add item' />
</div>
);
}
}
export default IconButton;
if doesn't suite for you, can you share more detail ?
I am using react-dom#16.6.1 and react#16.6.1 that should support react Context and trying to run a simple example same as the react-context:
app.js
import React, { Component } from 'react';
import AppManger from './components/AppManger';
import './App.css';
export const ThemeContext = React.createContext({a1:'a1'});
class App extends Component {
render() {
return (
<div className="App">
<h1>Manage Storefront Services Products</h1>
<ThemeContext.Provider value="dark">
<AppManger />
</ThemeContext.Provider>
</div>
);
}
}
export default App;
AppManger.js(has no context reference)
import React, { Component } from 'react'
import SearchBar from './SearchBar';
export default class AppManger extends Component {
constructor(props) {
super(props);
this.onSearchBarChange = this.onSearchBarChange.bind(this);
this.state = {
searchValue: '',
errorLoading: false,
errorObj: null,
}
}
onSearchBarChange(e) {
e.persist();
this.setState({ searchValue: e.target.value });
}
render() {
return (
<div>
Log out
<SearchBar onSearchBarChange={this.onSearchBarChange} inAttrView={this.state.onAttrPage} />
</div>
)
}
}
And the SearchBar.js where I want to use Context:
import React, { Component } from 'react';
import ThemeContext from '../App';
export default class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
showAttrModal: false
};
};
componentDidMount(){
console.log(this.context); //{}
}
render() {
const contextType = ThemeContext;
console.log(contextType); //{}
return (
<div>
{contextType} /*'contextType' is not defined no-undef */
<input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="Search for..." id="sku" name="sku" />
</div>
)
}
}
If I run the app I get Line 44: 'contextType' is not defined no-undef in SearchBar.js if I remove this line I get {} when I logging the this.context.
You aren't correctly using context, as you need to define it as a static property of the class and import it as a named import since you have exported it as a named import
import { ThemeContext } from '../App';
export default class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
showAttrModal: false
};
};
static contextType = ThemeContext;
componentDidMount(){
console.log(this.context); //{}
}
render() {
console.log(this.contextType); //{}
return (
<div>
{contextType} /*'contextType' is not defined no-undef */
<input type="text" style={searchBoxStyle} className="form-control" onChange={this.props.onSearchBarChange} placeholder="Search for..." id="sku" name="sku" />
</div>
)
}
}
You imported App instead of ThemeContext.
use import { ThemeContext } from '../App.js;
Here problem:
componentDidMount() {
console.log(this.context);
}
Here can't find this.context variable.
static contextType =
To
const contextType =
I'm trying to context api in my ract-native app. But i'm getting this error.
TypeError: TypeError: Cannot read property 'number' of undefined. What is wrong my code?
appContext.js
import React from 'react';
export const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 10,
};
}
render() {
return
(
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
)
}
}
export default AppProvider;
homeScreen.js
import { AppContext } from './appContext';
<AppContext.Consumer>
{(context) => context.number}
</AppContext.Consumer>
This is because you are not using your AppProvider component anywhere in your App. Try like this:
const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor( props ) {
super( props );
this.state = {
number: 10,
};
}
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
class App extends React.Component {
render() {
return (
<AppProvider>
<AppContext.Consumer>
{context => context.number}
</AppContext.Consumer>
</AppProvider>
);
}
}
AppProvider is merely a standard component here. It renders the context's Provider and that one gets some children. So, you should use this AppProvider component somewhere in your app and pass a child with a Consumer.
If you want to keep your context in a separate file it would be like this:
Context and provider component
import React from "react";
export const AppContext = React.createContext();
class AppProvider extends React.Component {
constructor( props ) {
super( props );
this.state = {
number: 1745,
};
}
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
export default AppProvider;
Main component
import React from "react";
import AppProvider, { AppContext } from "./AppProvider";
class App extends React.Component {
render() {
return (
<AppProvider>
<AppContext.Consumer>
{context => context.number}
</AppContext.Consumer>
</AppProvider>
);
}
}
export default App;
I have no idea how to make my app work.
I have a component ContactAdd that onClick must render component ModalWindow. ModalWindow has a parameter isOpened={this.state.open}. How to control this state from parent component?
import React from 'react';
import ContactAddModal from './ContactAddModal.jsx';
import './ContactAdd.css';
export default class ContactAdd extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div className="add-contact" onClick={ ??????? }>
<img src="./img/add.png" />
<ContactAddModal/>
</div>
)
}
}
import React from 'react';
export default class ContactAddModal extends React.Component {
constructor(props){
super(props);
this.state = {
show: false,
};
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleCloseModal () {
this.setState({ show: false });
}
render() {
return (
<div className="modal" isOpened={this.state.show}>
<button onClick={this.handleCloseModal}>Close Modal</button>
</div>
)
}
Making the modal a stateless component might be simpler here. The tradeoff being that you would have to handle the closing for every modal, which I think is acceptable. This answer is just an option and by no means an absolute truth.
It could look something like that
export default class ContactAdd extends React.Component {
constructor(props){
super(props);
this.state = {
showModal: true
};
this.hideModal = this.hideModal.bind(this);
}
hideModal() {
this.setState({
showModal: false
});
}
render() {
return (
<div className="add-contact">
<img src="./img/add.png" />
<ContactAddModal handleClose={this.hideModal} isOpened={this.state.showModal} />
</div>
)
}
}
Now the modal:
export default class ContactAddModal extends React.Component {
render() {
return (
<div className="modal" isOpened={this.props.isOpened}>
<button onClick={this.props.handleClose}>Close Modal</button>
</div>
)
}
I have a simple component like this
import { Component } from 'react'
export default class SearchList extends Component(){
constructor(props){
super(props);
}
render(){
const { placeholder } = this.props;
return(
<div className="searchList">
<input type="text" placeholder={placeholder}/>
<button>Search</button>
</div>
)
}
}
The somewhere I do <SearchList placeholder="Search Area" />
Why I got error of cannot set property of props of undefined?
When you write a react component extending React.Component you don't need the extra () after React.Component
Use this
export default class SearchList extends Component{
constructor(props){
super(props);
}
render(){
const { placeholder } = this.props;
return(
<div className="searchList">
<input type="text" placeholder={placeholder}/>
<button>Search</button>
</div>
)
}
}