We Keep Coding

Unexpected token, expected "," when trying to generate dynamic components

When I try to generate only a specific component based on a criteria in react, i get unexpected token error. I'm using an arrow function inside a map function to check if any of the elements satisfy the criteria (the element should be 1 to be shown).
I have tried putting the <{section} /> and null into parentheses but i don't think that's the problem. Here is my code:
import One from './components/One';
import Two from './components/Two';
import Three from './components/Three';
class App extends React.Component {
constructor(props) {
this.state = {
section_to_show: {
'One': 1,
'Two': 0,
'Three': 0,
},
};
}
render() {
...
const section_renders = Object.keys(this.state.section_to_show).map(
section => (
this.state.section_to_show[section] ? <{section} /> : null
)
);
return (
...
{section_renders}
...
);
}
};
What am i doing wrong? I just can't seem to figure it out.

I suspect you want to do:
import React from "react";
import ReactDOM from "react-dom";
const One = () => <div>1</div>;
const Two = () => <div>2</div>;
const Three = () => <div>3</div>;
class App extends React.Component {
state = {
section_to_show: {
One: <One />,
Two: <Two />,
Three: <Three />
}
};
render() {
const section_renders = ["One", "Two", "Three"].map(section =>
this.state.section_to_show[section]
? this.state.section_to_show[section]
: null
);
return <div>{section_renders}</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Your code: <{section} /> is invalid because you are trying to insert content within a fragment instead of wrapping a fragment tag around it <>{content} </>
Example codesandbox: https://codesandbox.io/embed/react-component-7mvbk

Okay, i see what you are trying to achieve,
First of all map returns an array and component name start from a capital letter that's how jsx distinguish between html elements and react Components
so heres the solution
const section_renders = ['One', 'Two'].map(
section => {
return (
this.state.section_to_show[section] ? this.state.section_to_show[section] : null
)
}
);
return (
<div>{section_renders.map(section => {
if(section) {
const Comp = section;
return <Comp />
} else {
return null
}
})}</div>
);
and your state object should look like this
state = {
section_to_show: {
One,
}
}
If you are still having some problem i have created a Sandbox for you convenience
one other thing if your array have small letters like you have ['one'] you can easily map it to an object but i hope that's not too difficult
Hope it helps

How to handle multiple context within React?

New to React - I am trying to use multiple contexts within my App component, I tried following the official guide on multiple contexts.
Here is my current code:
App.js
import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import AuthContext from "./AuthContext";
import LayoutContext from "./LayoutContext";
import LoadingScreen from "./LoadingScreen";
class App extends React.Component {
render() {
const { auth, layout } = this.props;
return (
<LayoutContext.Provider value={layout}>
<LoadingScreen />
<AuthContext.Provider value={auth}>
<AuthContext.Consumer>
{auth => (auth.logged_in ? console.log("logged in") : <Login />)}
</AuthContext.Consumer>
</AuthContext.Provider>
</LayoutContext.Provider>
);
}
}
render(<App />, document.getElementById("root"));
Login.js
import React from "react";
class Login extends React.Component {
render() {
return (
<div></div>
);
}
}
export default Login;
AuthContext.js
import React from "react";
const AuthContext = React.createContext({
logged_in: false
});
export default AuthContext;
LayoutContext.js
import React from "react";
const LayoutContext = React.createContext({
show_loading: false
});
export default LayoutContext;
LoadingScreen.js
import React from "react";
import LayoutContext from "./LayoutContext";
class LoadingScreen extends React.Component {
render() {
return (
<LayoutContext.Consumer>
{layout =>
layout.show_loading ? (
<div id="loading">
<div id="loading-center">
<div className="sk-chasing-dots">
<div className="sk-child sk-dot1"></div>
<div className="sk-child sk-dot2"></div>
</div>
</div>
</div>
) : null
}
</LayoutContext.Consumer>
);
}
}
export default LoadingScreen;
Following the example, I never really understood how this.props (in App.js) could hold my different contexts.
Both auth and layout show up as undefined, this.props is empty, which will in turn cause my app to throw errors such as Cannot read property 'show_loading' of undefined
I immediately liked the example provided in the React documentation, but I can't get this to work.

I've made a small snippet to show you how you could structure your context providers and consumers.
My App component in this case is the root of the app. It has all the providers, along with the value for each one of them. I am not changing this value, but I could if I wanted to.
This then has a single child component, MyOutsideComponent, containing all the chained consumers. There are better ways to do this, I just wanted to show you, one by one, how chaining consumers work. In practice you can neatly reduce this using a few techniques.
This MyOutsideComponent has the actual component, MyComponent, which takes all the context elements and just puts their value on the page. Nothing fancy, the point was to show how the values get passed.
let FirstContext = React.createContext('first');
let SecondContext = React.createContext('second');
let ThirdContext = React.createContext('third');
let FourthContext = React.createContext('fourth');
let MyComponent = (props) => {
return (<span >{Object.values(props).join(" ")}</span>);
};
let App = (props) => {
return (
<FirstContext.Provider value="this is">
<SecondContext.Provider value="how you">
<ThirdContext.Provider value="pass context">
<FourthContext.Provider value="around">
<MyOutsideComponent />
</FourthContext.Provider>
</ThirdContext.Provider>
</SecondContext.Provider>
</FirstContext.Provider>
);
};
let MyOutsideComponent = () => {
return ( < FirstContext.Consumer >
{first =>
(< SecondContext.Consumer >
{second =>
(< ThirdContext.Consumer >
{third =>
(<FourthContext.Consumer >
{fourth =>
(<MyComponent first={first} second={second} third={third} fourth={fourth} />)
}
</FourthContext.Consumer>)
}
</ThirdContext.Consumer>)
}
</SecondContext.Consumer>)
}
</FirstContext.Consumer>);
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Now, for the actual explanation. createContext gives you two actual components: a Provider and Consumer. This Provider, as you found out, has the value. The Consumer takes as child a single function taking one argument, which is your context's value.
This is where the docs are a bit unclear, and a bit which I hope I can help a bit. This does not get passed automatically in props unless the Provider is the direct parent of the component. You have to do it yourself. So, in the example above, I chained four consumers and then lined them all up in the props of my component.
You've asked about class-based components, this is how it ends up looking like:
let FirstContext = React.createContext('first');
let SecondContext = React.createContext('second');
let ThirdContext = React.createContext('third');
let FourthContext = React.createContext('fourth');
class MyComponent extends React.Component {
render() {
return ( < span > {Object.values(this.props).join(" ")} < /span>);
}
}
class App extends React.Component {
render() {
return (
<FirstContext.Provider value = "this is" >
<SecondContext.Provider value = "how you" >
<ThirdContext.Provider value = "pass context" >
<FourthContext.Provider value = "around" >
<MyOutsideComponent / >
</FourthContext.Provider>
</ThirdContext.Provider >
</SecondContext.Provider>
</FirstContext.Provider >
);
}
}
class MyOutsideComponent extends React.Component {
render() {
return (
<FirstContext.Consumer >
{ first =>
(< SecondContext.Consumer >
{ second =>
( < ThirdContext.Consumer >
{ third =>
( < FourthContext.Consumer >
{ fourth =>
( < MyComponent first = {first} second={second} third={third} fourth={fourth} />)
}
</FourthContext.Consumer>)
}
</ThirdContext.Consumer>)
}
</SecondContext.Consumer>)
}
</FirstContext.Consumer>
);
}
}
ReactDOM.render( < App / > , document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />

Making a section change by clicking a button

i am making a website under react with reactstrap, i have a section that contains charts and a button whose function is to replace said charts with another chart containing more details. however i am struggling to make a concrete code.
i have tried placing the charts in a separate component and have it's content switch through the use of a handleclick function on the button that changes the state of the section (using 'onclick')
i am really not confident in my code's clarity, so i tried reproducing what i did in a simpler matter within fiddle
class hello extends React.Component {
render() {
return (
<h2>hello</h2>
);
}
}
class bye extends React.Component {
render() {
return (
<h2>goodbye</h2>
);
}
}
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<div>
<div>
{this.state.components[hello]}
</div>
<button onClick={this.handleClick}>
switch
{this.setState({components:[<bye />]})}
</button>
</div>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
the div in the "toggle" component is supposed to switch between the components "hello" and "bye"
in effect the current section that is supposed to be displayed ("hello") will be replaced by the other section ("bye") uppon clicking the button under them.
thanks in advance.

If you simply want to toggle between the two components with the button click, you can use conditional rendering.
Change your render method to this:
render(){
return (
<div>
{this.state.isToggleOn?<Hello />:<Bye />}
<button onClick={this.handleClick}>Switch</button>
</div>
}
Also keep your Component's name first character capitalized or react might complain. And using Class based Components is outdated. Hooks are the hot thing right now. So try to use more Functional Components.
Note: My answer assumes you are using babel presets for transpiling jsx and es6 syntax. If not, check out #Colin's answer. It also uses hooks.

why not import all partial views and conditionally render them based on the condition
{condition & <View1/>

There's a few mistakes in your code. Here's an example which does what you want using conditional rendering:
import React, { useState } from "react";
import ReactDOM from "react-dom";
const Hello = () => {
return <h2>hello</h2>;
};
const Bye = () => {
return <h2>bye</h2>;
};
const App = () => {
const [toggled, setToggled] = useState(true);
const handleClick = () => {
setToggled(!toggled);
};
const render = () => {
if (toggled) {
return <Hello />;
}
return <Bye />;
};
return (
<div>
<button onClick={handleClick}>toggle</button>
{render()}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

There are many ways to do it:
Using conditional operator:
{ this.state.isToggleOn?<Hello/>:<Bye/> }
Using if condition:
render() {
let chart;
if(this.state.isToggleOn) {
chart = <Hello/>;
} else {
chart = <Bye/>;
}
return ( <div> { chart } </div>);
}
3 You can use switch case also for conditional rendering. Here it is not well suited as condition is true or false.

React Render HTML Code (dangerouslySetInnerHTML?)

I am building an App where Serverinput is being rendered.
Now I am trying to figure out, how it´s possible to display pure HTML. Because now it is only displayed as ...., where it should show an Image.
The question is, where should one call dangerouslySetInnerHTML() here to display all HTML as requested?
The Strings are being stores in an Array(messageList) that is being mapped. Userinput is escaped, so theres no problem on that side.
let listItems = messageList.map(d => (
<div >
<p className={d.senderId + "timestamp"}>{d.time}</p>
<p className={d.senderId} key={d.idCount} ref={d.idCount}>
{" "}
{d.text}{" "}
</p>
</div>
));
let gif1 = <img className="gif" alt="" src={gif} />;
return (
<div >
<div dangerouslySetInnerHTML={__html: {listItems}} />
<ul>{listItems}</ul>
</div>
);
Thanks a lot for any help that is given.
I updated the dangerousHTML where I thought it would work. But now it throws - Syntax error: Unexpected token, expected }

You shuould have something like this for each element that you want to show the dynamic content
<div dangerouslySetInnerHTML={__html: {yourHtmlContent}} />

How I understood is that Array(messageList) contains a list of markup strings.
So you just need to join them.
const messageList = [
"<h2>Header</h2>",
"<body>This is body!</body>",
"<footer>Footer!</footer>"
];
function createMarkup() {
return { __html: messageList.join("") };
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
It'd display something like this
You need to pass a string not an object as you do here.
(as it's just an implementation of innerHTML)
{__html: {listItems}}
Full source for completeness.
import React, { Component } from "react";
import { render } from "react-dom";
import "./styles.css";
const messageList = [
"<h2>Header</h2>",
"<body>This is body!</body>",
"<footer>Footer!</footer>"
];
function createMarkup() {
return { __html: messageList.join("") };
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<MyComponent />
</div>
);
}
}
render(<App />, document.getElementById("root"));
Working demo.

Defining React Prop Keys When Calling Static Child Components

I'm trying to better understand the role of keys in React components. I've read quite a bit but every example I've seen (like the one in the React docs or the great explanation on S.O.) assumes the data coming into the component is dynamic.
The examples all apply keys with array index values or using something like .map() to assign database IDs dynamically to each instance of the child component, and satisfy React's need for keys.
My example is on a static site with static content coming into the child component that gets called a couple of times. Best I figured, I could create a random number generator function getRandomInt and apply the key that way.
Unfortunately this results in the familiar React error:
Each child in an array or iterator should have a unique "key" prop.
Check the render method of CaseStudyOpinionSummary. It was passed a
child from DiagnosticCaseStudy.
Where am I going wrong?
Parent component (DiagnosticCaseStudy)
import React from 'react'
import CaseStudyOpinionSummary from '../../../components/CaseStudyOpinionSummary'
export default class DiagnosticCaseStudy extends React.Component {
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
render() {
return (
<CaseStudyOpinionSummary
part="Part One"
partTitle="Diagnosis"
partSubtitle="Primary Care Encounter"
partSummary="Short brief"
key={ this.getRandomInt(0, 100000) }
/>
<CaseStudyOpinionSummary
part="Part Two"
partTitle="Medication and Management"
partSubtitle="Initial Gastroenterologist Encounter"
partSummary="Another short brief"
key={ this.getRandomInt(0, 100000) }
/>
)
}
Child component (CaseStudyOpinionSummary)
import React from 'react'
export default class CaseStudyOpinionSummary extends React.Component {
render() {
return (
<div>
<section className="lightest-gray-bg">
<section className="aga-cs-container-short">
<section className="aga-container">
<h2 className="aga-cs-orange-title">{[this.props.part, ": ", this.props.partTitle ]}</h2>
<h2 className="aga-cs-question-title">{ this.props.partSubtitle }</h2>
{ this.props.partSummary }
</section>
</section>
</section>
</div>
)
}
}

React only needs the key prop to distinguish between sibling components in an array. You don't need the key prop for regular sibling components.
class AppWithArray extends React.Component {
render() {
return (
<div>
{[
<div key="1"> test1 </div>,
<div key="2"> test2 </div>
]}
</div>
);
}
}
class AppWithoutArray extends React.Component {
render() {
return (
<div>
<div> test3 </div>
<div> test4 </div>
</div>
);
}
}
ReactDOM.render(
<div>
<AppWithArray />
<AppWithoutArray />
</div>,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
When a component gets a new key prop, the old one will be unmounted and thrown away and a new one will be created and mounted. You almost never use the key prop outside of arrays, but it can be a nice technique to keep in mind if you ever need to create an entirely new component.
class Timer extends React.Component {
timer = null;
state = { count: 0 };
componentDidMount() {
this.timer = setInterval(() => {
this.setState(prevState => ({ count: prevState.count + 1 }));
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return <div>{this.state.count}</div>;
}
}
class App extends React.Component {
state = { timerKey: 1 };
componentDidMount() {
setTimeout(() => {
this.setState({ timerKey: 2 });
}, 5000);
}
render() {
return <Timer key={this.state.timerKey} />;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>