So I want when I press the button in the Button Component everything in the 'li section' disappears as well as in the ImageComponent but it not working I would like to know what my mistake is. ButtonComponent is rendered somewhere else.
App Component/Parent
function App({ hideButton }) {
return (
<div className="App">
<ImageComponent hideButton={hideButton} />
</div>
);
}
// ButtonComponent
function ButtonComponent() {
const [hideButton, setHideButton] = React.useState(false)
function handleClick() {
setHideButton(true)
}
return (
{
!hideButton && (
<li>
<img className="image"src="./icons/>
<Button onClick={handleClick} variant="outlined" className="button__rightpage" >Hide</Button>
<caption className="text"> Hide</caption>
</li >
)
}
)
}
// ImageComponent
const ImageComponent = ({ hideButton }) => {
return (
<div>
{
!hideButton && (
<div>
<img src='icons/icon.png' />
<caption>Image </caption>
</div>
)
}
</div>
)
}
you need to lift up the state to the most parent Component be accessible to the ButtonCommponent and the ImageComponent. in this Case App Component. however, if the ButtonComponent is rendered out of the hierarchy under the App Component tree, you should use the context API.
create a context and share the state on it and it will be accessible on the application level.
//#1. create context.
export const HiddenContext = React.createContext(false);
//#2. create the provider and share the state with it.
function HiddenProvider({ children }) {
const [hideButton, setHideButton] = React.useState(false);
function handleClick() {
setHideButton(true);
}
return (
<HiddenContext.Provider value={{ hideButton, handleClick }}>
{children}
</HiddenContext.Provider>
);
}
//#3. render the provider component to the most top parent component
export default function App() {
const { hideButton } = React.useContext(HiddenContext);
return (
<HiddenProvider>
<div className="App">
<ImageComponent hideButton={hideButton} />
<OtherComponentRenderTheButton />
</div>
</HiddenProvider>
);
}
// other component that render the button
function OtherComponentRenderTheButton() {
return <ButtonComponent />;
}
//ButtonComponent
function ButtonComponent() {
const { hideButton, handleClick } = React.useContext(HiddenContext);
return (
<React.Fragment>
{!hideButton && (
<li>
<img className="image" src="./icons" alt="" />
<Button
onClick={handleClick}
variant="outlined"
className="button__rightpage"
>
Hide
</Button>
<caption className="text"> Hide</caption>
</li>
)}
</React.Fragment>
);
}
// ImageComponent
const ImageComponent = () => {
const { hideButton } = React.useContext(HiddenContext);
return (
<div>
{!hideButton && (
<React.Fragment>
<img src="icons/icon.png" alt="" />
<caption>Image </caption>
</React.Fragment>
)}
</div>
);
};
working demo
Related
I have question regarding sending clicked value to the first sibling components and I will send the props value to the second siblings is that possible?
I have module where when I click the Category Items to the first siblings the Products on the second sibling will change based on the category name that I click on the first sibling.
Here is my Parent Components:
function BuyerCategoryPage(props) {
return (
<div>
<CategorySlider />
<CategoryProducts/>
</div>
)
}
export default BuyerCategoryPage
First Sibling CategorySlider.js:
const HandleChangeProductCat = (value) => {
console.log(value);
// send the value to the second sibling
}
return (
<div>
<Container fluid>
<Slider style={{paddingTop:20, margin: '0 auto'}} {...settings}>
{
SlideData.map((data) => {
return (
<div key={data.id} >
<div className="sliderDataCategory">
<h6>
<Container>
<Row>
<Col md={3}>
<img className="img-fluid" src={data.cat_image} />
</Col>
<Col >
<label onClick={() => HandleChangeProductCat(data.cat_title)}>{data.cat_title}</label>
</Col>
</Row>
</Container>
</h6>
</div>
</div>
)
})
}
</Slider>
</Container>
</div>
)
Second Sibling CategoryProducts.js
function CategoryProducts(props) {
}
The simplest would be to lift state up into the BuyerCategoryPage component and pass an "onChange" handler to CategorySlider and the state value to CategoryProducts
function BuyerCategoryPage(props) {
const [state, setState] = React.useState(); // common state
return (
<div>
<CategorySlider onChange={setState} /> // pass updater function
<CategoryProducts value={state} /> // pass state value
</div>
);
}
CategorySlider
const handleChangeProductCat = (value) => {
console.log(value);
props.onChange(value); // invoke callback and pass new value
}
CategoryProducts
function CategoryProducts({ value }) { // access the passed value
// use the `value` prop as necessary
}
For example:
function Example() {
const [value, setValue] = useState("");
const onClick = (someValue) => {
setValue(someValue);
}
return (
<div>
<First onClick={onClick} />
<Second value={value} />
</div>
)
}
function First(props) {
const onClick = () => {
props.onClick((new Date()).toString());
}
return (
<input type="button" onClick={onClick} value="Click me" />
)
}
function Second(props) {
return (
<div>{props.value}</div>
)
}
I am creating a "presentation" component with multiple sections, each rendered dynamically.
In the parent component which houses all the different children, I want the "next button" disabled for each part until a certain condition has been met. The button lives in the parent component.
This component does not pass the property:
Child one example:
export function ChildOne() {
const [condition, setCondition] = useState(false);
return (
<div>
<button onClick={() => setCondition(true)}>
hello world
</button>
</div>
);
}
Parent:
import ChildOne, condition from "../child-one"
export default function Parent() {
return(
<div className="childRenderer">
{page == 1 && (
<ChildOne />
)}
</div>
<button isDisabled={condition}>Next</button>
);
}
I'm not sure how to pass the condition property from the child component so that I can use it in the parent component. In addition, is this methodology an anti-pattern? Can I conditionally make the button in the parent disabled based on values from the child component in another way?
Thank you.
try this way
child:
export function ChildOne({setCondition}) {
return (
<div>
<button onClick={() => setCondition(true)}>
hello world
</button>
</div>
);
}
Parent:
import {ChildOne} from "../child-one"
export default function Parent() {
const [condition, setCondition] = useState(false);
return(
<div className="childRenderer">
{page == 1 && (
<ChildOne setCondition={setCondition} />
)}
</div>
<button isDisabled={condition}>Next</button>
);
}
You should use a state in parent component to control disabled for steps. It can use when you have other pages.
export default function Parent() {
const [condition, setCondition] = useState({});
const changeCondition = (val) => {
setCondition({...condition, [page]: val})
}
return(
<div className="childRenderer">
{page == 1 && (
<ChildOne changeCondition={} />
)}
</div>
<button isDisabled={!condition[page]}>Next</button>
);
}
export function ChildOne({changeCondition}) {
return (
<div>
<button onClick={() => {changeCondition(true)}}>
hello world
</button>
</div>
);
}
You could pass the onClick fucntion as a props param.
Child
export function ChildOne({onClick}) {
return (
<div>
<button onClick={onClick}>
hello world
</button>
</div>
);
}
Parent
import ChildOne, condition from "../child-one"
export default function Parent() {
const [condition, setCondition] = useState(false);
return(
<div className="childRenderer">
{page == 1 && (
<ChildOne onClick={() => setCondition(true)} />
)}
</div>
<button isDisabled={condition}>Next</button>
);
}
in your Parent component try this :
import ChildOne, condition from "../child-one"
export default function Parent() {
const [condition, setCondition] = useState(false);
const handleClick = () => setCondition(true)
return(
<div className="childRenderer">
{page == 1 && (
<ChildOne handleClick={handleClick} />
)}
</div>
<button isDisabled={condition}>Next</button>
);
}
and in use children :
export function ChildOne({handleClick}) {
return (
<div>
<button onClick={handleClick}>
hello world
</button>
</div>
);
}
I'm trying to pass id from child component(and nested component) to it's parent.
var Comment = React.createClass({
handleClick: function(id){
console.log(this.props, id)
this.props.handleClick(this.props.comment.id)
},
render: function() {
var comment = this.props.comment
return <div className="Comment">
<div onClick={()=> this.handleClick(comment.id)} dangerouslySetInnerHTML={{__html: comment.comment_text}}/>
{comment.children.length > 0 && comment.children.map(function(child) {
return <Comment key={child.id} comment={child}/>
})}
</div>
}
})
but the function in child it's undefined and also not to make function availble in nested child.
https://jsfiddle.net/yk5nomzb/1/
Any help would be appreciate it
I made it work by changing the function into an arrow function inside the App.js render like this:
render() {
return (
<div>
{this.props.comments.map(comment => {
return (
<Comment key={comment.id}
handleClick={this.handleClick}
comment={comment}
/>
);
})}
</div>
);
}
Also in the Comment component, you need to add handleClick prop to the child Comment components like this:
render() {
var comment = this.props.comment;
return (
<div className="Comment">
<div
onClick={() => this.handleClick(comment.id)}
dangerouslySetInnerHTML={{ __html: comment.comment_text }}
/>
{comment.children.length > 0 &&
comment.children.map(child => {
return (
<Comment
key={child.id}
handleClick={this.props.handleClick}
comment={child}
/>
);
})}
</div>
);
}
So the problem is likely the famous this and bind issue in javascript.
Codesandbox
I've created a React component that takes inputs from other components to display text of various size in a view. Since it is basically a form, what I want to do is pass the current view into another page where I will then post that view to my database as JSON.
Since the state of the input fields are not set in this component, I'm not sure how I would pass them as props to a new view.
This is a condensed version of what my data input component looks like:
INPUTSHOW.JSX
export default class InputShow extends Component {
componentDidMount() {
autosize(this.textarea);
}
render() {
const { node } = this.props;
...
return (
<div className="editor-div" >
{
(node.type === 'buttonA') ?
<textarea
style={hlArea}
ref={a => (this.textarea = a)}
placeholder="type some text"
rows={1}
defaultValue=""
id={node.id} className='editor-input-hl' type="text" onChange={this.props.inputContentHandler} />
:
(node.type === 'buttonB')
?
<textarea
style={subArea}
ref={b => (this.textarea = b)}
placeholder="type some text"
rows={1}
defaultValue=""
id={node.id} className='editor-input-sub' type="text" onChange={this.props.inputContentHandler} />
:
""
}
</div >
)
}
}
This works fine in creating inputs in a current view. I then pass those values to TextAreaField.JSX
export default (props) => {
return (
<>
<button><Link to={{
pathname: '/edit/preview',
text: props.inputsArray
}}>preview</Link></button>
<div className='view'>
{
props.inputsArray.map(
(node, key) => <InputShow key={key} node={node} inputContentHandler={props.inputContentHandler} />
)
}
</div>
</>
)
}
and then finally that is rendered in my Edit.JSX form:
export default class Edit extends React.Component {
constructor(props) {
super(props)
UniqueID.enableUniqueIds(this);
this.state = {
inputs: [],
text: ''
}
}
...
createPage = async () => {
await this.props.postPage(this.state.text)
}
// Handler for listen from button.
buttonCheck = (e) => {
index++;
const node = {
id: this.nextUniqueId() + index,
type: e.target.id,
text: '',
image: true
}
this.setState(
prev => ({
inputs: [...prev.inputs, node]
})
)
console.log(this.state.inputs);
}
inputContentHandler = (e) => {
let newArray = this.state.inputs;
let newNode = newArray.find((node) => {
return (node.id === e.target.id)
})
newNode.text = e.target.value;
this.setState({ inputs: newArray });
console.log(this.state.inputs);
}
render() {
return (
<div>
<InnerHeader />
<div className='some-page-wrapper'>
<div className='row'>
<div className="dash-card-sm">
<br />
<EditButtonContainer buttonCheck={this.buttonCheck} />
<Route path='/edit/form' render={() => (
<TextAreaField
inputsArray={this.state.inputs}
inputContentHandler={this.inputContentHandler}
/>
)}
/>
<Route path='/edit/preview' render={(props) => (
<Preview
inputs={this.state.inputs}
text={this.state.text}
createPage={this.createPage}
/>
)}
/>
<br /> <br />
{/* Button Header */}
</div>
</div>
</div>
</div>
)
}
}
The problem is that I don't know how I should be passing the rendered view to the Preview.jsxcomponent. I'm still new to react (4 months)...Any help in pointing me in the right direction would be appreciated.
I'm stuck trying to refactor my scoreboard component because I can't pass click handlers from parent to child correctly. What am I doing wrong?
This is my component structure
import React, { useState } from "react";
import "./App.css";
function ScoreBoard(props) {
return (
<section className="scoreboard">
<div className="topRow">
<div className="home">
<h2 className="home__name">{props.data.home.name}</h2>
<div className="home__score">{props.data.home.score}</div>
</div>
<div className="timer">00:03</div>
<div className="away">
<h2 className="away__name">{props.data.away.name}</h2>
<div className="away__score">{props.data.away.score}</div>
</div>
</div>
<BottomRow />
</section>
);
}
function TDButton(props) {
return (
<button className={props.side + "Buttons__touchdown"}>
{props.side.toUpperCase() + " Touchdown"}
</button>
);
}
function FGButton(props) {
/* similar to TDButton */
}
function Buttons(props) {
let scoreCounter = props.scoreCounter;
return (
<section className="buttons">
<div className="homeButtons">
<TDButton side="home" onClick={scoreCounter("Lions", 7)} />
<TDButton side="away" onClick={scoreCounter("Tigers", 7)} />
</div>
<div className="awayButtons">
<FGButton side="home" onClick={scoreCounter("Lions", 3)} />
<FGButton side="away" onClick={scoreCounter("Tigers", 3)} />
</div>
</section>
);
}
function App() {
const data = {
home: { name: "Lions", score: 32 },
away: { name: "Tigers", score: 32 }
};
const [homeScore, sethomeScore] = useState(data.home.score);
const [awayScore, setawayScore] = useState(data.away.score);
const scoreCounter = (team, amount) => {
if (team === data.home.name) {
console.log("in");
sethomeScore(homeScore + amount);
} else {
console.log("out");
setawayScore(awayScore + amount);
}
};
return (
<div className="container">
<ScoreBoard data={data} />
<Buttons data={data} scoreCounter={() => scoreCounter} />
</div>
);
}
The initial component all lived in App so I am trying to break it into smaller components. I can't seem to get the click handler to work though. What am I doing wrong? Maybe my component breakdown could be improved? Thanks!
You adding props to TButton but you don't use it inside. Use something like this:
function TDButton(props) {
return (
<button className={props.side + "Buttons__touchdown"} onClick={props.onClick}>
{props.side.toUpperCase() + " Touchdown"}
</button>
);
}
so it's like:
<TDButton side="home" onClick={scoreCounter("Lions", 7)} />
<button className={props.side + "Buttons__touchdown"} onClick={scoreCounter("Lions", 7)}>
{props.side.toUpperCase() + " Touchdown"}
</button>
because you're passing the props to event from parent.
but this will only work if scoreCounter("Lions", 7) return a function, if it's regular function that do action you need:
<TDButton side="home" onClick={() => scoreCounter("Lions", 7)} />
so props is a function not the value that function return.
Also this maybe not what you want:
<Buttons data={data} scoreCounter={() => scoreCounter} />
scoreCounter will be function that return value of function (that answer previous consern but you really want normal function, because above function don't have params and you use 'Lion' that will be ignored):
<Buttons data={data} scoreCounter={scoreCounter} />
SO you've to call the function in your JSX
<Buttons data={data} scoreCounter={() => scoreCounter()} />
You can pass value into the function if required.