I have a Button.js component and I am using it on multiple locations on my app. How can I add the button value such as <button>hello world</button> when I am importing it on my Dashboard.js component?
Button.js
import React, { Component } from "react";
import './Button.css'
class Button extends Component {
render() {
return (
<button></button>
);
}
}
export default Button;
Dashboard.js
import React, { Component, useMemo, useState } from "react";
import Button from "../Button/Button";
import SearchBox from "../SearchBox/SearchBox";
import "./Dashboard.css";
import fire from "../../fire";
import UserList from "./UserList";
class Dashboard extends Component {
render() {
return (
<div>
<Button/>
</div>
);
}
}
export default Dashboard;
You can pass a value to Button component in two ways
export default class Dashboard extends React.Component {
render() {
return (
<div>
<Button>Hello world</Button>
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button>{this.props.children}</button>
);
}
}
or
export default class Dashboard extends React.Component {
render() {
return (
<div>
<Button value="hello world"/>
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button>{this.props.value}</button>
);
}
}
Pass the value in as a prop.
In the Dashboard component:
class Dashboard extends Component {
render() {
return (
<div>
<Button value="hello world"/>
</div>
);
}
}
In the button component:
class Button extends Component {
render() {
return (
<button>{this.props.value}</button>
);
}
}
send text via props
Button.js
class Button extends Component {
render() {
return (
<button>{this.props.text}</button>
);
}
}
Dashboard.js
class Dashboard extends Component {
render() {
return (
<div>
<Button text={'Here is your custom text'}/>
</div>
);
}
}
class Button extends Component {
constructor(props: any) {
super(props);
}
render() {
return (
<button>
{this.props.children}
</button>
);
}
}
class Dashboard extends Component {
render() {
return (
<div>
<Button>
hello world
</Button>
</div>
);
}
}
Related
I have a requirement in which I have to call a function present in a child component from parent component using React.createRef() but the problem here is that it is multilevel child.
I'm able to call a function present in 'ChildComponent1' component but not able to call a function present in 'ChildComponent2' component from 'Parent' component. Please tell me a correct way to do this.
This is my parent.js file
import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
callFunctionFromChild = () => {
this.ref.current.doSomething()
}
render() {
return (
<div>
<ChildComponent1 ref={this.childRef} />
<button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
</div>
);
}
}
export default ParentComponent;
This is my ChildComponent1.js file:
import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';
class ChildComponent1 extends Component {
render() {
return (
<div>
<ChildComponent2 ref={this.props.ref} />
</div>
);
}
}
export default ChildComponent1;
and this is my inner ChildComponent2.js file:
import React, { Component } from 'react';
class ChildComponent2 extends Component {
doSomething = () => {
console.log("Something is done!!");
}
render() {
return (
<div>
My Child Component
</div>
);
}
}
export default ChildComponent2;
I am trying to send value of TextInput to another Class Function in console.log. My approach is when the button is pressed the value FromStr in TextInput will got passed into another class function. Here's my code
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import receiveMessage from "./receiveMessage"
export default class WeatherProject extends Component{
constructor (props) {
super(props);
this.state={
From:'',
FromStr:'',
}
}
changeText=(From)=>{
this.setState({From})
}
changeText1=(To)=>{
this.setState({To})
}
onPress = ()=>{
this.setState({FromStr: this.state.From})
receiveMessage.receiveMessage();
}
render(){
return (
<View>
<View style={styles.inputFields}>
<TextInput placeholder="From" id="from" style={styles.fromField} onChangeText={this.changeText} />
<View style={styles.buttonStyle}>
<Button
title={"Go Back"}
color="#f194ff"
onPress={this.onPress}
></Button>
</View>
</View>
</View>
);
}
}
receiveMessage.js
import React, { Component } from "react";
export default class receiveMessage extends Component {
static receiveMessage=()=>{
console.log(this.state.FromStr)
}
}
React does not allow to pass the data between react components in this way.
Following is way to pass the data between components in React. To get more insights please follow
import React, { Component } from 'react';
class WeatherProject extends Component {
render() {
const messageToPassed = 'Hello';
return (
<div>
<ReceiveMessage message={messageToPassed} />
</div>
);
}
}
const ReceiveMessage = props => <h1>{props.message}</h1>;
export default App;
here we pass the value from sidemenu component by raising an event
App.js
class App extends React.Component {
handleSubmit = (e, data) => console.log(`my data from props`, data);
render() {
return (
<Sidemenu
onSubmit={(e, data)=>this.handleSubmit(e, data)} />
);
}
}
SideMenu.js
const Sidemenu = props => {
const { onSubmit} = props;
return (
<button onClick={(e, type)=>this.onSubmit(e, 'mydata')} />
);
}
I am new to reactjs. I want to write an event handler handleClick() for a ButtonComponent component in App.js and I want to change the state inside the event-handler.
My App.js:
import ButtonComponent from "./ButtonComponent"
class App extends Component {
constructor(){
super()
this.state={
isLoggedIn: true
}
this.handleClick=this.handleClick.bind(this)
}
handleClick() {
alert("Reached click event handler")
if(this.state.isLoggedIn===true){
this.setState(
{
isLoggedIn:false
}
)
}
else{
//this.state.isLoggedIn=true
this.setState(
{
isLoggedIn:true
}
)
}
}
render() {
//alert("Reached")
return (
<div>
<ButtonComponent isLoggedIn={this.state.isLoggedIn} onClick={this.handleClick} />
</div>
);
}
}
export default App;
My ButtonComponent.js
import React, {Component} from "react";
class ButtonComponent extends Component{
render(){
if(this.props.isLoggedIn===true){
console.log(this.props.isLoggedIn)
return(
<button >Logout</button>
)
}
else{
console.log(this.props.isLoggedIn)
return(
<button>Login</button>
)
}
}
}
export default ButtonComponent;
But the handleClick() event handler isn't firing. There is no error shown, just the event handler isn't executed.
You need to pass the onClick prop of ButtonComponent into the child <button/>
render(){
if(this.props.isLoggedIn===true){
console.log(this.props.isLoggedIn)
return(
<button onClick={this.props.onClick}>Logout</button>
)
}
else{
console.log(this.props.isLoggedIn)
return(
<button onClick={this.props.onClick}>Login</button>
)
}
}
As you are passing this.handleClick function as props to ButtonComponent you need to use that props to fire onClick event from ButtonComponent.
Simplified code,
//App.js
class App extends Component {
constructor() {
super()
this.state = {
isLoggedIn: true,
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
alert('Reached click event handler')
this.setState({
isLoggedIn: !this.state.isLoggedIn,
})
}
render() {
//alert("Reached")
return (
<div>
<ButtonComponent
isLoggedIn={this.state.isLoggedIn}
onClick={this.handleClick}
/>
</div>
)
}
}
//ButtonComponent.js
import React, {Component} from 'react'
class ButtonComponent extends Component {
render() {
return (
<button onClick={this.props.onClick}>
{this.props.isLoggedIn ? 'Logout' : 'Login'}
</button>
)
}
}
export default ButtonComponent
Demo
import * as React from 'react';
import {
browserHistory
} from "react-router-dom"
import Title from './app'
**export default class TestRoute extends React.Component<ITestRouteProps, {}> {
handleClick = () => {
browserHistory.push('/Title')
};
public render(): React.ReactElement<ITestRouteProps> {
return (
<div>
<h1>Simple SPA</h1>
<button onClick={this.handleClick} type="button">/*this shoult take me to another page
click me </button>
</div>
);
}
}
You can use like this
import PropTypes from 'prop-types';
static contextTypes = {
router: PropTypes.object,
}
export default class TestRoute extends React.Component<ITestRouteProps, {}> {
handleClick = () => {
this.context.router.history.push('/Title')
};
public render(): React.ReactElement<ITestRouteProps> {
return (
<div>
<h1>Simple SPA</h1>
<button onClick={this.handleClick} type="button">/*this shoult take me to another page
click me </button>
</div>
);
}
}
Can I use children in React Container or is it wrong?
For example, I have a list of buttons(ActionButton) that are grouped together (ActionMenu).
import React from 'react';
class App extends React.Component {
render() {
return (
<ActionMenu>
<ActionButton name="New" icon="add" />
<ActionButton name="Delete" icon="remove" />
</ActionMenu>
)
}
}
class ActionMenu extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('Click!');
}
render() {
return React.Children.map(this.props.children, (button) =>
React.cloneElement(button, {
onClick: this.handleClick
})
);
}
}
function ActionButton({ name, icon, onClick }) {
return <button class={icon} onClick={onClick}>{name}</button>
}
You can use children regardless of whether it's a component of container.
"[children are] especially common for components like Sidebar or Dialog that represent generic 'boxes'."
In your case you have a menu, which falls into this category.
https://reactjs.org/docs/composition-vs-inheritance.html
I think this is what you are after. Actually you should just put the children in its closest parent instead of its grandpa.
import React from 'react';
import { render } from 'react-dom';
function ActionButton({ name, handleClick }) {
return <button onClick={handleClick}>{name}</button>
}
class ActionMenu extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
alert('Click!');
}
render() {
return (
<div>
<ActionButton name="add" handleClick={this.handleClick}/>
<ActionButton name="remove" handleClick={this.handleClick} />
</div>
);
}
}
class App extends React.Component {
render() {
return (
<ActionMenu />
)
}
}
render(<App />, document.getElementById('root'));
You can try to run it in sandbox.
By the way, using bind is quite redundant now, we can use public class fields syntax, which is already ECMA stage 2.