We Keep Coding

React P tag update but not live

I do not want the p tag to be updated live.
When i write in the input p tag automatically update.
i want update when i click ok button and not live mode.
What I write in the input directly updates the p tag. I do not want that
This is code --->
import React, {Component} from 'react'
class Test extends Component{
constructor(props){
super(props);
this.state={
text:"hello",
}
this.alpha=this.alpha.bind(this)
this.show=this.show.bind(this)
}
alpha(event){
this.setState({text:event.target.value})
}
show(){
alert(this.state.text)
}
render(){
return(
<div>
<input type="text" onChange={this.alpha} />
<button onClick={this.show} >ok</button>
<p>{this.state.text}</p>
</div>
)
}
}
export default Test

Do you mean something like this?
import React, {Component} from 'react'
class Test extends Component{
constructor(props){
super(props);
this.state={
text: '',
value: 'hello',
}
this.handleChange=this.handleChange.bind(this)
this.apply=this.apply.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value });
}
apply(){
this.setState(({ value }) => ({ text: value }));
}
render(){
return (
<div>
<input type="text" onChange={this.handleChange} />
<button onClick={this.apply}>ok</button>
<p>{this.state.text}</p>
</div>
);
}
}
export default Test

Can't import context before initialization

I'm trying to import my created context from my App.js, in a child component.
App.js
export const FilterContext = React.createContext("test");
export default class App extends React.Component {
render() {
return (
<div className="App">
<Navigation />
<Hero />
<FilterContext.Provider value="hello">
<OfferSorting />
<div className="wrapper">
<div className="container">
<Offer />
</div>
</div>
<NewOfferButton />
</FilterContext.Provider>
</div>
);
}
}
Then I want to access my context in <OfferSorting />
OfferSorting.js
import { FilterContext } from "../../../App";
export default class OfferSorting extends React.Component {
static contextType = FilterContext;
constructor(props) {
super(props);
}
componentDidMount() {
console.log(this.context)
}
}
But in OfferSorting.js it will throw the error Cannot access 'FilterContext' before initialization. How can I access my context, and not use props?

React context - 'contextType' is not defined

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 =

Accessing variable from different class

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>

(reactjs) get child component value

i have the following react component Timepicker:
export default class TimePicker extends Component{
render(){
return(
<div>
<input id={this.props.nameID} type="text"></input>
</div>);
}
}
TimePicker is used by SingleTask:
export default class SingleTask extends Component{
....
render(){
....
<TimePicker nameID="time" />
.....
}
}
How can I access the input value in TimePicker from SingleTask?

You can solve this in 2 ways:
only change in SingleTask component:
Add a ref to TimePicker component and access it's DOM. From there you can query your input by your choice of jQuery selector. Here I have used tag selector (Note: There is no dependency of the jQuery to be included).
:
export default class SingleTask extends Component{
yourFunction(){
var selectedTime = React.findDOMNode(this.refs.timePickerComp).querySelector('input').value;
}
render(){
....
<TimePicker ref="timePickerComp" nameID="time" />
.....
}
}
Expose data through function of child component (The React way):
TimePicker :
export default class TimePicker extends Component{
function getSelectedTime(){
return document.getElementById(this.props.nameID).value;
}
render(){
return(
<div>
<input id={this.props.nameID} type="text"></input>
</div>);
}
}
SingleTask :
export default class SingleTask extends Component{
yourFunctionWhereYouNeedTime(){
var timeSelected = this.refs.timePickerComp.getSelectedTime(); // here you'll access the child component data.
}
render(){
....
<TimePicker ref="timePickerComp" nameID="time" />
.....
}
}