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

How can get intl.formatMessage from parent component?

How can I get intl.formatMessage from parent component? I wrapped parent component with injectIntl and want send intl.formatMessage to child component. Can someone help me with that? Thank you!
Parent component
import Car from "./test3";
import { injectIntl } from "react-intl";
class Intl extends React.Component {
render() {
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</div>
);
}
}
export default injectIntl(Intl);
Child component
import { FormattedMessage} from "react-intl";
class Car extends React.Component {
yearsTranslation = () =>
this.props.intl.formatMessage({ id: "search.filter.maturity.years" });
render() {
return <h2>Hello {this.yearsTranslation()}!</h2>;
}
}
export default Car;

Just pass the prop down, like so :
class Intl extends React.Component {
render() {
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" intl={this.props.intl}/>
</div>
);
}
}
export default injectIntl(Intl);

I thinks intl is available in the context. Please check the documentation.

How can i use a function in different files in React?

I'm trying to use a function, which is in a different component from App.js.
and I'm having the syntax error, I don't know what did I do wrong. I have a button in App.js and when I click on it, that function from another component that I've mentioned earlier should trigger.
app.js:
import React from 'react';
import {shaking} from './components/Tree/Tree.js';
class App extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
shaking();
console.log("done !");
}
render() {
return (
<div>
<Tree className='tree' />
<Apples />
<Basket />
<br/>
<button className="start-btn" onClick={this.handleClick}>Start !</button>
<br/>
</div>
);
}
};
export default App;
And this is my another component:
import React from 'react';
import TreeSvg from './Tree-svg/TreeSvg.js';
import './Tree.sass';
export function shaking(){
const tree = document.getElemenetsByClassName(".tree-img")[0];
tree.classList.add("apply-shake");
console.log('shaked!');
}
class Tree extends React.Component{
constructor() {
super();
this.shaking = this.shaking.bind(this);
}
shaking() {
this.setState({shaked:'1'});
const tree = document.getElemenetByClassName(".tree-img");
tree.classList.add("apply-shake");
console.log('shaked!');
}
render(){
return(
<div className="tree-img">
<TreeSvg />
</div>
);
}
};
export default Tree;

Make your Tree component like this
import React from 'react';
import TreeSvg from './Tree-svg/TreeSvg.js';
import './Tree.sass';
export function shaking(){
const tree = document.getElementsByClassName(".tree-img")[0];
tree.classList.add("apply-shake");
console.log('shaked!');
}
class Tree extends React.Component{
constructor() {
super();
this.state = {
shaked : ''
}
shaking() {
this.setState({shaked:'1'});
const tree = document.getElementByClassName(".tree-img");
tree.classList.add("apply-shake");
console.log('shaked!');
}
render(){
return(
<div className="tree-img">
<TreeSvg />
</div>
);
}
};
export default Tree;

You do have 2 syntax errors in your code. Both are located at the Tree component file.
At your exported function (Line 6):
const tree = document.getElemenetsByClassName(".tree-img")[0];
replace Elemenets with Elements.
At the class method shaking() (Line 21):
const tree = document.getElemenetByClassName(".tree-img"); replace Elemenet with Element

React JS clock compo

I want to make clock made of components in react. Each value I want to be from different components. I got that code:
import React from 'react';
import ReactDOM from 'react-dom';
class ClockTimeHour extends React.Component{
render(){
return <h1>{this.props.date.getHours()}</h1>
}
}
class ClockTimeMinute extends React.Component{
render(){
return <h1>{this.props.date.getMinutes()}</h1>
}
}
class ClockTimeSecond extends React.Component{
render(){
return <h1>{this.props.date.getSeconds()}</h1>
}
}
class ClockDateYear extends React.Component{
render(){
return <h1>{this.props.date.getFullYear()}</h1>
}
}
class ClockDateMonth extends React.Component{
render(){
return <h1>{this.props.date.getMonth()}</h1>
}
}
class ClockDateDay extends React.Component{
render(){
return <h1>{this.props.date.getDate()}</h1>
}
}
class ClockTime extends React.Component{
render(){
return (
<div>
<ClockTimeHour date={this.state.now}/>
<ClockTimeMinute date={this.state.now}/>
<ClockTimeSecond date={this.state.now}/>
</div>
);
}
}
class ClockDate extends React.Component{
render(){
return (
<div>
<ClockDateYear date={this.state.now}/>
<ClockDateMonth date={this.state.now}/>
<ClockDateDay date={this.state.now}/>
</div>
);
}
}
class Clock extends React.Component{
constructor(props){
super(props)
this.state={
now: new Date()
}
}
componentDidMount() {
this.timerId=setInterval(()=>{
this.setState({ now : new Date() });
},1000);
}
render(){
return (
<div>
<ClockTime date={this.state.now}/>
<ClockDate date={this.state.now}/>
</div>
);
}
}
document.addEventListener('DOMContentLoaded', function(){
ReactDOM.render(
<Clock/>,
document.getElementById('app')
);
});
and when I am running it I got: Uncaught TypeError: Cannot read property 'now' of null at ClockTime.render

You are not setting the state for the component you mentioned, but your are passing through it props as date here <ClockTime date={this.state.now}/>, so I assume you might want to change from:
class ClockTime extends React.Component{
render(){
return <div>
<ClockTimeHour date={this.state.now}/>
<ClockTimeMinute date={this.state.now}/>
<ClockTimeSecond date={this.state.now}/>
</div>
}
}
to:
class ClockTime extends React.Component{
render(){
return (
<div>
<ClockTimeHour date={this.props.date}/>
<ClockTimeMinute date={this.props.date}/>
<ClockTimeSecond date={this.props.date}/>
</div>
);
}
}
You can find here a working example, using your code but applying the changes I've seggested.

react cannot set property of props of undefined

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>
)
}
}