I have a hypothetical question about maintaining an array of polymorphic React components. Is it possible/good React practice to maintain an array of components that are descendants of a common component, then render them in the container? For instance:
import * as React from 'react';
import GenericBlock from './GenericBlock';
import { BlockTypeA, BlockTypeB, BlockTypeC } from './MyBlocks';
export default class BlockHolder extends React.Component {
blocks : GenericBlock[] = [ <BlockTypeA />, <BlockTypeB />, <BlockTypeC /> ];
render() {
return (
<div id="workspace">
{
this.blocks
}
</div>);
};
};
GenericBlock.tsx
import * as React from 'react';
export default class GenericBlock extends React.Component {
render() { return (<div></div>); }
}
MyBlocks.tsx:
import * as React from 'react';
import GenericBlock from './GenericBlock';
class BlockTypeA extends GenericBlock {
render() { return (<div></div>); }
};
class BlockTypeB extends GenericBlock {
render() { return (<div></div>); }
};
class BlockTypeC extends GenericBlock {
render() { return (<div></div>); }
};
export { BlockTypeA, BlockTypeB, BlockTypeC };
The above code snippet yields the error: Objects are not valid as a React child, but I think it captures the spirit of what I am talking about. Is there a way to make the above scheme work?
I am sure that this question has already been asked and answered, but I can't seem to get the Google Search correct.
EDIT:
Added Sandbox link: https://codesandbox.io/s/wizardly-wilson-vb7nn
Now I am encountering a new error: Type 'Element' is missing the following properties from type 'GenericBlock': render, context, setState, forceUpdate, and 2 more.
EDIT 2:
Typing the blocks array as JSX.Element removes the error and makes everything work, but that doesn't seem like very good practice as JSX.Element can be any element, whereas the point of typing it as GenericBlock is to ensure that all the elements are descendants of a specific component.
in react code, it works perfectly: https://codesandbox.io/s/optimistic-ptolemy-g25ge
no errors, no warnings
import * as React from "react";
import { BlockTypeA, BlockTypeB, BlockTypeC } from "./MyBlocks";
export default class BlockHolder extends React.Component {
blocks = [
<BlockTypeA key={1} />,
<BlockTypeB key={2} />,
<BlockTypeC key={3} />
];
render() {
return <div id="workspace">{this.blocks}</div>;
}
}
import * as React from "react";
export default class GenericBlock extends React.Component {
render() {
return <div />;
}
}
import * as React from 'react';
import GenericBlock from './GenericBlock';
class BlockTypeA extends GenericBlock {
render() { return (<div>A</div>); }
};
class BlockTypeB extends GenericBlock {
render() { return (<div>B</div>); }
};
class BlockTypeC extends GenericBlock {
render() { return (<div>C</div>); }
};
export { BlockTypeA, BlockTypeB, BlockTypeC };
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0",
"react-scripts": "3.0.1"
},
"devDependencies": {
"typescript": "3.8.3"
}
Related
I've got an error when creating new component in React Native
I don't know what causes this error because I already declare the View component
"react-native": "0.65.1"
the code in the component
import React from 'react';
import { Text, View } from 'react-native';
import Styles from './Styles';
import CommonUtils from '../../components/base/CommonUtils';
import Constant from '../../constants/Constant';
class FrequentlyAskedQuestion extends React.Component {
navigationOptions = (route, navigation) => {
return CommonUtils.getBackNavigationHeader(route, navigation, Constant.HEADER_TITLE.FAQ, 1, false, true);
};
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
this.props.navigation.setOptions(this.navigationOptions(this.props.route, this.props.navigation));
}
render() {
return (
<View>
<Text>
asda
</Text>
</View>
)
}
}
export default FrequentlyAskedQuestion;
Tried exactly with your code,couldnt replicate the error
https://snack.expo.dev/#gaurav1995/gnarly-marshmallows
import React from 'react';
import { Text, View } from 'react-native';
class FrequentlyAskedQuestion extends React.Component {
navigationOptions = (route, navigation) => {
return null
};
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
// this.props.navigation.setOptions(this.navigationOptions(this.props.route, this.props.navigation));
}
render() {
return (
<View>
<Text>
asda
</Text>
</View>
)
}
}
export default FrequentlyAskedQuestion;
My bad, I made a mistake in the stack navigator of importing the component, it already solved
from
import FrequentlyAskedQuestion from '../features/faq/faq';
to import FrequentlyAskedQuestion from '../features/faq/Faq';
2 components :- ClickCounter, mouseHoverCounter !
1 HOC component to do the counting work.
earlier I was counting the click and mouse hover by writing separate counter method in each component(cliccounter,mousehovecounter),
but
now, I'm trying to pass the component into hoc counter & get the new component with only one change , where I'm passing a props to originalComponent and returning it to see the behavior but its now working...
import React, { Component } from 'react'
import updatedComponent from './hocCounter'
class ClickCounter extends Component {
constructor(props) {
super(props)
this.state = {
counter:0
}
}
ClickCounterHandler = () =>{
this.setState((prevState)=>{
return {counter:prevState.counter+1}
})
}
render() {
const count=this.state.counter
return (
<div>
<button onClick={this.ClickCounterHandler}>{this.props.name} Clicked {count} Times</button>
</div>
)
}
}
export default updatedComponent(ClickCounter)
import React, { Component } from 'react'
import updatedComponent from './hocCounter'
class HoverMouseCounter extends Component {
constructor(props) {
super(props)
this.state = {
counter:0
}
}
MouseOverCounter(){
this.setState((prevState)=>{
return {counter:prevState.counter+1}
})
}
render() {
const count=this.state.counter
return (
<div>
<h1 onMouseOver={this.MouseOverCounter.bind(this)}>{this.props.name} Hovered For {count} Time(s)</h1>
</div>
)
}
}
export default updatedComponent(HoverMouseCounter)
import React from 'react'
const updatedComponent = originalComponent => {
class newComponent extends React.Component {
render(){
return <originalComponent name='Harsh'/>
}
}
return newComponent
}
export default updatedComponent
In App.js, I'm returning
<ClickCounter></ClickCounter>
<HoverMouseCounter></HoverMouseCounter>
this only !
Check the error in the console,
index.js:1 Warning: <originalComponent /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at originalComponent
This means You are using the small letter in originalComponent
React components are expected to start with a capital letter
Try this in you HOC component
import React from 'react'
const updatedComponent = OriginalComponent => {
class NewComponent extends React.Component {
render(){
return <OriginalComponent name='Harsh'/>
}
}
return NewComponent
}
export default updatedComponent
I don't know why i am getting this error can someone please help i have checked the syntax and cant find anything wrong. It's probably something stupid but i just can't find what it is.
import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'
import './Pathfinder.css';
export default class Pathfinder extends Component {
constructor(props){
super(props);
this.state = {
grid: [],
};
}
}
render(); {
return (
<div>
{this.startGrid()}
</div>
);
}```
Issue is semicolon after the render keyword.
And render method is outside the class component due to wrongly placed brackets
render(); {}
Change it to
render() {}
Code should look like :
import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'
import './Pathfinder.css';
export default class Pathfinder extends Component {
constructor(props){
super(props);
this.state = {
grid: [],
};
}
render() {
return (
<div>
{this.startGrid()}
</div>
);
}
}
I think that you copy-n-paste the code, but you messed up with the curly braces.
import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'
import './Pathfinder.css';
export default class Pathfinder extends Component {
constructor(props){
super(props);
this.state = {
grid: [],
};
}
} <-- should be removed
render() { <-- remove the ; sign
return (
<div>
{this.startGrid()}
</div>
);
}
} <-- close your component with curly braces
Tip for every code: Use the correct indentation.
Tip for some codes: Use a linter with prettier.
I have two component in my project one is Tag and the other is LandingTicker so i want when i click Tag componet update state for LandTicker componet, and landticker componet in different file.
how i can do that?
thank you.
Tag component code::
tag/index.js
import React from 'react';
import './index.scss';
class Tag extends React.Component {
handleClick(e) {
let tags = document.querySelectorAll('.show-clickable');
Array.from(tags).map(el => el.classList.remove('selected-tag'))
e.target.classList.add('selected-tag');
/*
Here i should update the state for LandingTicker component.
and remember any component in different file.
How i can do that???
*/
}
render() {
return (
<div
className="show-clickable"
onClick={this.handleClick}
>
click here
</div>
);
}
}
export default Tag;
LandingTicker component code::
LandingTicker/index.js
import React from 'react';
import TickerRow from './TickerRow';
import './index.scss';
class LandingTicker extends React.Component {
state = {
coin: 'USD'
}
render() {
return (
<div className="landing-ticker__body">
{selectCoin(this.state.coin)}
</div>
</div>
);
}
}
const selectCoin = (coin) => {
const coins = {
USD: ['BTCUSD', 'ETHUSD', 'EOSUSD', 'LTCUSD'],
EUR: ['BTCEUR', 'ETHEUR', 'EOSEUR'],
GBP: ['BTCGBP', 'EOSGBP'],
JPY: ['BTCJPY', 'ETHJPY'],
};
return (
coins[coin].map(el =>
<TickerRow symbol={el} key={el.toString()} />
)
);
}
export default LandingTicker;
Edit:
my component Hierarchy::
StatusTable
TagsTable
Tag
TickerSearch
LandingTickers
TickersRow
StatusTable component code::
import React from 'react';
import TagsTable from './TagsTable';
import TickerSearch from './TickerSearch';
import LandingTicker from './LandingTicker';
import './StatusTable.scss';
class StatusTable extends React.Component {
render() {
return (
<div className="status-table">
<TagsTable />
<TickerSearch />
<LandingTicker />
</div>
);
}
}
export default StatusTable;
React handle all its component data in the form of state and props(immutable). So it is easy to pass data from parent to child or one component to another using props :
Your Tag.js file:
import React, { Component } from "react";
import LandingTicker from "./LandTicker";
class Tag extends Component {
constructor(props) {
super(props);
this.state = {
trigger: true
};
}
handleClick(e) {
// do all logic here and set state here
this.setState({ trigger: this.state.trigger });
}
render() {
//And then pass this state here as a props
return (
<div className="show-clickable" onClick={this.handleClick}>
click here
<LandingTicker trigger={this.state.trigger} />
</div>
);
}
}
export default Tag;
Inside LandTicker.js file:
import React from 'react';
import TickerRow from './TickerRow';
import './index.scss';
class LandingTicker extends React.Component {
state = {
coin: 'USD'
}
render() {
//Catch your props from parent here
//i.e this.props(it contains all data you sent from parent)
return (
<div className="landing-ticker__body">
{selectCoin(this.state.coin)}
</div>
);
}
}
const selectCoin = (coin) => {
const coins = {
USD: ['BTCUSD', 'ETHUSD', 'EOSUSD', 'LTCUSD'],
EUR: ['BTCEUR', 'ETHEUR', 'EOSEUR'],
GBP: ['BTCGBP', 'EOSGBP'],
JPY: ['BTCJPY', 'ETHJPY'],
};
return (
coins[coin].map(el =>
<TickerRow symbol={el} key={el.toString()} />
)
);
}
export default LandingTicker;
I think this is the best answer for your question if you don't use state management system such as Redux or Mobx.
https://medium.com/#ruthmpardee/passing-data-between-react-components-103ad82ebd17
(you need to check third option)
I want to pass a value to a div with id good in my index.html but it brings this error, Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead. in TestComponent (at App.js:49)
in div (at App.js:28)
in Apps (at index.js:7)
Please what am I doing wrong
TestComponent.js
import React, { Component } from 'react';
class TestComponent extends Component {
componentDidMount(){
console.log("Great");
}
render() {
// var {test} = this.props;
return (
<p>
{this.props.test}
</p>,
document.getElementById("good")
);
}
}
export default TestComponent;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TestComponent from "./components/TestComponent"
class Apps extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<TestComponent test='doyin'/>
</div>
);
}
}
export default Apps;
Index.html
<div id="good"></div>
A class Component render function shouldn't use document.getElementById, you need to use ReactDOM.render to do that
import React, { Component } from 'react';
class TestComponent extends Component {
componentDidMount(){
console.log("Great");
}
render() {
// var {test} = this.props;
return (
<p>
{this.props.test}
</p>
);
}
}
export default TestComponent;
App
class Apps extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<TestComponent test='doyin'/>
</div>
);
}
}
ReactDOM.render(<Apps />, document.getElementById("good"))
export default Apps;
In TestComponent.js, inside render function you are trying to return two elements, <p> and document.getElementById("good"). Probably you just wanted to return <p>:
render() {
return <p>{this.props.test}</p>;
}
Also, it looks like you've mistaken React.Component.render with ReactDOM.render(element, container[, callback]) where the second argument of the functions is the container.