Develop Reference

How would you transfer data between components in React?

I recently learned a bit about react and I'm confused about how I would transfer data between two components.
Currently, I have 2 functions implemented as such:
I have topbar.tsx which shows the topbar information, such as showing some button to open the sidebar (which is my next function).
import Sidebar from './sidebar'
export default topbar(props) {
return (
<Drawer
open={isOpen}
onclose={anotherfunction}>
<Sidebar />
</Drawer>
)
}
I also have sidebar.tsx which contains the implementation of sidebar. (This is, if I understand react terminology correctly, the child).
import CloseButton from 'react-bootstrap/CloseButton';
export default Sidebar() {
return (
<CloseButton />
)
}
The issue I'm facing is that, since the topbar is the function that controls the opening and closing of the sidebar, however, I want a close button to appear on my sidebar and do exactly as is said. How would I be able to transfer state information between these two files such that I can open sidebar and close it with the button in sidebar.
Thank you!

You elevate your state to the parent component, and pass event handler functions through.
For instance:
// Holds state about the drawer, and passes functions to mamange that state as props.
function Topbar() {
const [isOpen, setIsOpen] = useState(false)
return (
<Drawer isOpen={isOpen}>
<Sidebar onClose={() => setIsOpen(false)} />
</Drawer>
)
}
// Drawer will show it's children if open.
function Drawer({ isOpen, children }: { isOpen: boolean, children: React.ReactNode }) {
if (!isOpen) return null
return <div>{children}</div>
}
// Sidebar will send onClose to the button's onClick
function Sidebar({onClose}: { onClose: () => void }) {
return (
<CloseButton onClick={onClose} />
)
}
// Close button doesn't care what happens on click, it just reports the click
function CloseButton({onClick}: { onClick: () => void }) {
return <div onClick={onClick} />
}
Playground

First of all, rename topbar to Topbar. Otherwise you can't render your component.
For your question, you can pass the props directly to Sidebar component too.
export default Topbar(props) {
return (
<Drawer
open={isOpen}
onclose={anotherfunction}>
<Sidebar open={isOpen}
onclose={anotherfunction}/>
</Drawer>
)
}

React Native - Using Props for Modal

I am trying to use modal on my application but I want to separated into different classes as App.js and /components/modal. The problem I encountered is I couldn't pass the props properly. Here is my codes.
I imported modal.
import InfoModal from '../components/InfoModal';
I created state.
state = {modalVisible: false}
The visible function on press.
setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
}
Calling component.
render() {
const { modalVisible } = this.state;
return (
<InfoModal visible= {modalVisible} />
<TouchableOpacity onPress={() => this.setModalVisible(true)} ><Text style={styles.infoButton}>Info</Text></TouchableOpacity>
)}
I didn't understand what prop should I set and how, to work it properly.

Since you have a render method, I assume your App.js is a Class component.
You can create a state on the constructor like that
class App extends React.Component {
constructor(props){
super(props);
this.state = {
modalVisible: false,
}
}
// rest of the class
}
Your function for changing the modal's visibility should be like that
setModalVisible = (visible) => {
this.setState({modalVisible: visible});
}
That's how you control the state on the App class.
And for your modal, you pass App.state.modalVisible as a prop.
<InfoModal visible={this.state.modalVisible} />
When you use setState, all the components receiving that new value as a prop will properly update

use state and method inside Modal component and toggle it by using modal reference.
Put
const { modalVisible } = this.state;
and
setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
}
in InfoModal.js
then use it like this
render() {
return (
<InfoModal ref={(c)= this.infoModal=c }visible= {modalVisible} />
<TouchableOpacity onPress={() => this.infoModal.setModalVisible(true)} ><Text style={styles.infoButton}>Info</Text></TouchableOpacity>
)

Passing a variable between non-nested components using Context API

Suppose I have two components which aren't nested: a button and a panel. When the button is clicked, the panel will show or hide depending on the previous state (like an on/off switch). They aren't nested components, so the structure looks like this:
<div>
<Toolbar>
<Button />
</Toolbar>
<Content>
...
<ButtonPanel />
</Content>
</div>
I can't change the structure of the DOM. I also can't modify any other component other than the button and panel components.
The Button and ButtonPanel components are related, however, and will be used together throughout the solution. I need to pass a property to the panel to let it know when to show or when to hide. I was thinking about doing it with Context API, but I think there's something I'm doing wrong and the property never updates.
This is my code:
Context
import React from 'react';
export const ButtonContext = React.createContext({
showPanel: false,
});
Button
import React, { Component } from 'react';
import { ButtonContext } from './ButtonContext';
class Button extends Component {
constructor() {
super();
this.state = {
showPanel: false,
};
}
render() {
return (
<ButtonContext.Provider value={{ showPanel: this.state.showPanel }}>
<li>
<a
onClick={() => this.setState({ showPanel: !this.state.showPanel }, () => console.log('Changed'))}
>
<span>Button</span>
</a>
</li>
</ButtonContext.Provider>
);
}
}
export { Button };
Panel
import React, { Component } from 'react';
import { Panel, ListGroup, ListGroupItem } from 'react-bootstrap';
import { ButtonContext } from './ButtonContext';
class ButtonPanel extends Component {
static contextType = ButtonContext;
render() {
return (
<ButtonContext.Consumer>
{
({ showPanel }) => {
if (showPanel) {
return (
<Panel id="tasksPanel">
<Panel.Heading >Panel Heading</Panel.Heading>
<ListGroup>
<ListGroupItem>No Items.</ListGroupItem>
</ListGroup>
</Panel>
);
}
return null;
}
}
</ButtonContext.Consumer>
);
}
}
export { ButtonPanel };
I've also tried simply accessing the context in the ButtonPanel component like so:
render() {
const context = this.context;
return context.showPanel ?
(
<Panel id="tasksPanel">
<Panel.Heading >Tasks</Panel.Heading>
<ListGroup>
<ListGroupItem className="tasks-empty-state">No tasks available.</ListGroupItem>
</ListGroup>
</Panel>
)
:
null;
}
What am I doing wrong?
Thanks

From the React docs:
Accepts a value prop to be passed to consuming components that are descendants of this Provider.
So this means that <ButtonContext.Provider> has to wrap <ButtonContext.Consumer> or it has to be higher up in the component hierarchy.
So based on your use case, you could do:
// This app component is the div that wraps both Toolbar and Content. You can name it as you want
class App extends Component {
state = {
showPanel: false,
}
handleTogglePanel = () => this.setState(prevState => ({ togglePanel: !prevState.togglePanel }));
render() {
return (
<ButtonContext.Provider value={{ showPanel: this.state.showPanel, handleTogglePanel: this.handleTogglePanel }}>
<Toolbar>
<Button />
</Toolbar>
<Content>
<ButtonPanel />
</Content>
</ButtonContext.Provider>
);
}
}
class Button extends Component {
...
<ButtonContext.Consumer>
{({ handleTogglePanel }) => <a onClick={handleTogglePanel} />}
</ButtonContext.Consumer>
}
class ButtonPanel extends Component {
...
<ButtonContext.Consumer>
{({ showPanel }) => showPanel && <Panel>...</Panel>}
</ButtonContext.Consumer>
}

Display some text in react depending on the switch case

I have a dropdown populated from a Web Service, what I want is to display some text according to the selection made. For example the first option in the Dropdown is Buy n and Save m so in a p tag I want to display Buy 2 and Save $1.5 I know this is work for a switch and the position of the array is going to be my "CASE" in order to know what to display or not but I'm new to react and also in programming so I need help..
import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import cr from '../styles/general.css';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
OfferTypeData: [],
OfferTypeState: '',
};
this.handleChange = this.handleChange.bind(this);
this.renderOfferTypeOptions = this.renderOfferTypeOptions.bind(this);
}
componentDidMount() {
const offerTypeWS = 'http://localhost:8080/services/OfferType/getAll';
fetch(offerTypeWS)
.then(Response => Response.json())
.then(findResponse => {
console.log(findResponse);
this.setState({
OfferTypeData: findResponse
});
});
}
handleChange(event, index, value) {this.setState({value});}
handleChangeDiscountType(event, index, value) {
this.setState({ OfferTypeState: (value) });
}
renderOfferTypeOptions() {
return this.state.OfferTypeData.map((dt, i) => {
return (
<MenuItem
key={i}
value={dt.offerTypeDesc}
primaryText={dt.offerTypeDesc} />
);
});
}
render() {
return (
<div className={cr.container}>
<div className={cr.rows}>
<div>
<DropDownMenu
value={this.state.OfferTypeState}
onChange={this.handleChangeDiscountType}>
<MenuItem value={''} primaryText={'Select Offer Type'} />
{this.renderOfferTypeOptions()}
</DropDownMenu>
<br/>
<p>{DISPLAY SOME TEXT HERE}</p>
</div>
</div>
</div>
);
}
}
Thanks in advance!
Regards.

Create a component which passes a callback to the dropdown, this callback will update the state of the container which will in turn set the props of the display. This is very common in React and is the basis of how the compositional pattern works. If you need to share data between two components just put them in a container and lift the state to the parent component. These components are usually called containers and there is a bunch of documentation on it.
This is a good starting point: https://reactjs.org/docs/lifting-state-up.html
A rough layout would be something like this.
class Container extends React.Component {
constructor(props) {
super(props);
// Don't forget to bind the handler to the correct context
this.changeText = this.changeText.bind(this);
}
changeText(text) {
this.setState({text: text});
}
render() {
return (
<DropDown callback={this.changeText} />
<Display text={this.state.text} />
)
}
}
Display component...
const Display = (props) => (
<p>{this.props.text}</p>
)

ReactJS - How to get focus on component after make visible

I had a <div> with a <p> child component I name SocialPostwithCSS, and onClick would cause it to hide, change the state to editing: true and a <textarea> would show up and I would use this.textarea.focus with the textarea having ref={(input)=>{this.textarea=input}} and had no problem.
I needed to autosize the area, so I downloaded the NPM package TextareaAutosize, now I'm having issues focusing on this text area. I check, the npm TextareAutosize file has class and is not stateless. Currently this.textarea is returning undefined
Summary: How can I focus on <TextareaAutosize /> after <div> onClick
which causes the state change to show <TextareaAutosize>?
File Below:
import React, { Component } from 'react'
import SocialPostWithCSS from './SocialPostWithCSS'
import TextareaAutosize from 'react-autosize-textarea'
class SocialPost extends Component {
constructor(props) {
super(props)
this.state = {
message: this.props.socialPost.message,
editing: false
}
}
_clickToEdit() {
this.textarea.focus()
}
render() {
return (
<div>
{(!this.state.editing) ?
<div onClick={async ()=>{await this.setState({editing: true});this._clickToEdit}}>
<SocialPostWithCSS >{this.state.message}</SocialPostWithCSS>
</div>
:<div>
<TextareaAutosize
onBlur={() => {this.setState({ editing: false})}}
type='text'
ref={(input)=>{this.textarea=input}}
value={this.state.message}
/>
</div>
}
</div>
)
}
}
export default SocialPost

From looking at the code, it appears that TextareaAutosize exposes the inner ref through a prop named innerRef. So change your code like this:
<TextareaAutosize
onBlur={() => {this.setState({ editing: false})}}
type='text'
innerRef={(input)=>{this.textarea=input}}
value={this.state.message}
/>

this.textarea is returning undefined onclick to the div because initially when this.state.editing is false TextareaAutosize component was not rendered and hence this.textarea was not initialized by the mounted instance of the component.