We Keep Coding

Use const from another file in Reactjs

I have an object:
import React, {Component} from 'react';
import ProgressBar from "./ProgressBar";
class Languages extends Component {
state = {
languages: [
{id: 1, value: "XXX", xp: 1.5},
{id: 2, value: "CCC", xp: 1},
{id: 3, value: "AAA", xp: 2}
]
}
render() {
let {languages} = this.state;
const levels = ['Test', 'Bad', 'Sorry']
return (
<div className="languages">
<ProgressBar
programming={languages}
className="languagesDisplay"
levels={levels}
title="Languages"
/>
</div>
);
}
}
export default Languages;
import React from 'react';
const ProgressBar = (props) => {
return (
<div className={props.className}>
<h3>{props.title}</h3>
<div className="years">
<span>Experiences</span>
props.levels.map((level) => {
<span>level</span>
})
</div>
<span>level</span> return props.levels.map((level) =>level)
how can i display the const ['Test', 'Bad', 'Sorry'] from Languages.js in a <span> in a different React file?

Edit after seeing your response above: If the issue is just that the above code isn't working, here are a couple of things to check.
Inside of ProgressBar you've got a couple of errors in your JSX. First, you need curly braces around your JavaScript interpolation and secondly, you're not returning anything in your .map() function. If you were using parentheses it would be an implicit return, but with the curly braces you need a return statement. Try this instead:
import React from 'react';
const ProgressBar = (props) => {
return ( <div className={props.className}>
<h3> {props.title} </h3>
<div className ="years">
<span> Experiences </span>
{props.levels.map((level) => {
return (<span>{level}</span>)
})
} </div>
)};
My initial answer, which still may be helpful for understanding what's going on:
It's not entirely clear what you want to do, but here are a couple of things that might be helpful.
What's happening in your code above is that the levels variable, which is an array of strings, is being passed down from the parent component Languages into the child component ProgressBar via the props object.
When ProgressBar is called inside of Languages, it's properties (or props) are set (programming, className, levels, title).
The levels={levels} part means that the prop levels on ProgressBar is being set to the variable levels (the array of strings).
Inside of ProgressBar all of those properties are accessible in the props object that's passed as an argument. That's why you're able to access that array of strings with props.levels.map() which will map the array of strings however you tell it to (in this case by printing each individual item within a <span> tag).
So, with that understanding of what's happening here, here are a couple of things you could do to access the levels variable elsewhere in another file.
If levels is a constant that you want to access in multiple places, you could move it outside of the body of your Languages component and export it to use it in other places.
That could look like:
import React, {
Component
} from 'react';
import ProgressBar from "./ProgressBar";
export const levels = ['Test', 'Bad', 'Sorry']
class Languages extends Component {
state = {
languages: [{
id: 1,
value: "XXX",
xp: 1.5
},
{
id: 2,
value: "CCC",
xp: 1
},
{
id: 3,
value: "AAA",
xp: 2
}
]
}
render() {
let {
languages
} = this.state;
return ( <
div className = "languages" >
<
ProgressBar programming = {
languages
}
className = "languagesDisplay"
levels = {
levels
}
title = "Languages" /
>
<
/div>
);
}
}
export default Languages;
By exporting it from the top level, you could import it in another file exactly as it is.
import { levels } from '/insert-first-file-location-here'
Another option is to pass the levels variable into another component as a prop. This way if levels gets changed at the top level, those changes will drill down into subsequent components.
import React, {Component} from 'react';
import ProgressBar from "./ProgressBar";
class Languages extends Component {
state = {
languages: [
{id: 1, value: "XXX", xp: 1.5},
{id: 2, value: "CCC", xp: 1},
{id: 3, value: "AAA", xp: 2}
]
}
render() {
let {languages} = this.state;
const levels = ['Test', 'Bad', 'Sorry']
return (
<>
<div className="languages">
<ProgressBar
programming={languages}
className="languagesDisplay"
levels={levels}
title="Languages"
/>
</div>
<AnotherComponentThatUsesLevels
levels={levels} />
</>
);
}
}
export default Languages;
And then
import React from 'react'
export const AnotherComponentThatUsesLevels (props) => {
return (
<>
{/* do something with levels here, maybe map them like before*/}
{props.levels.map((level) => (<span>{level}</span>)}
</>
)
}
Does that help understand what's happening in the example and give you a couple of ways you could use that variable in another location?

You need to export that certain constant from your file like that:
import React, {
Component
} from 'react';
import ProgressBar from "./ProgressBar";
export const levels = ['Test', 'Bad', 'Sorry']
class Languages extends Component {
state = {
languages: [{
id: 1,
value: "XXX",
xp: 1.5
},
{
id: 2,
value: "CCC",
xp: 1
},
{
id: 3,
value: "AAA",
xp: 2
}
]
}
render() {
let {
languages
} = this.state;
return (
<div className="languages">
<ProgressBar
programming={languages}
className="languagesDisplay"
levels={levels}
title="Languages"
/>
</div>
);
}
}
export default Languages;
After it, you need to import it in the file where you want to access it:
import {levels} from '/path/to/file';

How to get array of objects in javascript from an array of dictionaries in python?

I'm trying to use an array of dictionaries in python as arguement to a custom dash component and use it as array of objects
in python :
audioList_py = [
{
"name": "random",
"singer": 'waveGAN\'s music',
"cover":
'link_1.jpg',
"musicSrc":
'link_1.mp3',
},
{
"name": "random",
"singer": 'waveGAN\'s music',
"cover":
'link_2.jpg',
"musicSrc":
'link_2.mp3',
},
... etc
]
in Javascript:
audioList1_js = [
{
name: "random",
singer: 'waveGAN\'s music',
cover:'link_1.jpg',
musicSrc: 'link_1.mp3',
},
{
name: "random",
singer: 'waveGAN\'s music',
cover: 'link_2.jpg',
musicSrc: 'link_2.mp3',
},
... etc
]
Here is snippet of javascript code of the dash custom component:
export default class MusicComponent extends Component {
render() {
const {id, audioLists} = this.props;
return (
<div>
<h1>{id}</h1>
<ReactJkMusicPlayer audioLists={audio_list}/>,
</div>
);
}
}
MusicComponent.defaultProps = {};
MusicComponent.propTypes = {
/**
* The ID used to identify this component in Dash callbacks.
*/
audios: PropTypes.array,
id: PropTypes.string,
};
And using the generated component in python:
app = dash.Dash(__name__)
app.layout = html.Div([
music_component.MusicComponent(audios=audioList_py),
html.Div(id='output'),
... etc
])
But I got :
TypeError: The `music_component.MusicComponent` component (version 0.0.1) received an unexpected keyword argument: `audios`Allowed arguments: id
What I am doing wrong ?
Any help or advice will be appreciated, Thanks a lot.

Make sure you run npm run build after you make a change to your custom React component. With those proptypes you shouldn't get that error. If I remove the audios proptype I can reproduce that error.
Besides that you pass a value to the audios property:
music_component.MusicComponent(audios=audioList_py)
but you try to retrieve audioLists from props:
const {id, audioLists} = this.props;
Change this to:
const {id, audios} = this.props;
Demo
export default class MusicComponent extends Component {
render() {
const {id, audios} = this.props;
return (
<div>
<h1>{id}</h1>
<ReactJkMusicPlayer audioLists={audios} />
</div>
);
}
}
MusicComponent.defaultProps = {};
MusicComponent.propTypes = {
/**
* The ID used to identify this component in Dash callbacks.
*/
id: PropTypes.string,
audios: PropTypes.array,
};

Issue fixed, I should run : npm run build:backends to generate the Python, R and Julia class files for the components, but instead I was executing npm run build:js and this command just generate the JavaScript bundle (which didn't know about the new props).
And set the audios property in the component to be like so:
MusicComponent.defaultProps = {audios: audioList1};
MusicComponent.propTypes = {
id: PropTypes.string,
audios: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired
};

can't 'convert' typescript definition in javascript

I am trying to rewrite this Apollo typescript repository to javascript.
I try to learn typescript but there is one thing called 'type casting' or 'type assertion' which makes me confuse.
let me explain it with code:
//cache.tsx
import { InMemoryCache, ReactiveVar, makeVar } from "#apollo/client";
import { Todos } from "./models/Todos";
import { VisibilityFilter, VisibilityFilters } from "./models/VisibilityFilter";
export const cache...{
...
...
}
export const todosVar: ReactiveVar<Todos> = makeVar<Todos>( //how i can 'convert' this type caster value to vanilla js?
todosInitialValue
);
export const visibilityFilterVar = makeVar<VisibilityFilter>( //how i can 'convert' this type caster value to vanilla js?
VisibilityFilters.SHOW_ALL
)
other 2 files which are used by this cache.tsx are:
//todos.tsx
export interface Todo {
text: string;
completed: boolean;
id: number
}
export type Todos = Todo[];
and
VisibilityFilter.tsx
export type VisibilityFilter = {
id: string;
displayName: string;
}
export const VisibilityFilters: { [filter: string]: VisibilityFilter } = {
SHOW_ALL: {
id: "show_all",
displayName: "All"
},
SHOW_COMPLETED: {
id: "show_completed",
displayName: "Completed"
},
SHOW_ACTIVE: {
id: "show_active",
displayName: "Active"
}
}
How can I avoid typescript type checking in this situation and more important, how can I use ReactiveVar and makeVar imports properly?

Just remove the generic like this:
From:
makeVar<Todos>(
To:
makeVar(
Change this:
export const todosVar: ReactiveVar<Todos> = makeVar<Todos>( //how i can 'convert' this type caster value to vanilla js?
todosInitialValue
);
export const visibilityFilterVar = makeVar<VisibilityFilter>( //how i can 'convert' this type caster value to vanilla js?
VisibilityFilters.SHOW_ALL
)
To this:
export const todosVar = makeVar(todosInitialValue);
export const visibilityFilterVar = makeVar(VisibilityFilters.SHOW_ALL);
How to avoid typescript checking - replace your extensions from .ts and .tsx to .js and .jsx respectively.

Angular Interface with Enum

is possible to have an interface with enum at angular ?
I have an interface like this:
export interface UserModel {
title: TitleEnum
}
An Enum:
export enum TitleEnum {
Admin = 0,
Alfa = 1,
Beta = 2
}
So I am trying to get {{user.title}}, keep receiving the numbers, am I missing something?

This is how enums work! If you are looking assign the keys to strings, then you can use a string enum.
export enum TitleEnum {
Admin = 'Admin',
Alfa = 'Alfa',
Beta = 'Beta'
}

What you can also do is to use a property
//in your component html
<select>
<option *ngFor="let key of keys" [value]="key" [label]="race[key]"></option>
</select>
export enum RaceCodeEnum {
Asian = 1,
Mexican = 2,
AfricanAmerican = 3,
White = 4,
}
export class RaceSelect {
race= RaceCodeEnum;
constructor() {
this.keys = Object.keys(this.race).filter(k => !isNaN(Number(k)));
}
}

Is it normal to not pass variable as parameter in Javascript?

I came across such code in Javascript and became quite puzzled as I come from C++/Python background:
const list = [
{
title: 'React',
url: 'https://facebook.github.io/react/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
},
...
];
class App extends Component {
constructor(props) {
super(props);
# leanpub-start-insert
this.state = {
list: list,
};
# leanpub-end-insert
}
...
}
It seems like you can just use variable that is outside of a function. I understand that that is how JS works but I am not sure if that is what people usually do, just use variable from outside and not pass as parameter. Is that a standard and normal practice?
The following looks quite impossible to pass variable as parameter to function:
import React, { Component } from 'react';
import './App.css';
const list = [
{
title: 'React',
url: 'http://facebook.github.io/react',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
},
{
title: 'Redux',
url: 'https://github.com/reactjs/redux',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1,
}
]
const isSearched = searchTerm => item =>
item.title.toLowerCase().includes(searchTerm.toLowerCase());
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: list,
searchTerm: '',
}
this.onDismiss = this.onDismiss.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
}
onDismiss(id) {
const isNotID = item => item.objectID !== id;
const updatedList = this.state.list.filter(isNotID);
this.setState({ list: updatedList });
}
onSearchChange(event) {
this.setState({ searchTerm: event.target.value });
}
render() {
return (
<div className="App">
<form>
<input
type="text"
onChange={this.onSearchChange}
/>
</form>
{this.state.list.filter(isSearched(this.state.searchTerm)).map(item =>
<div key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
<span>
<button onClick={() => this.onDismiss(item.objectID)} type="button">
Dismiss
</button>
</span>
</div>
)}
</div>
)
}
}
export default App;

Is that a standard and normal practice?
Generally no, but there are exceptions. (for example having the entire state of the application in a variable).
Classes and functions are meant to be reused.
If your function (or class) relies on global variables then it will be hard to reuse and test.
Bottom line is: avoid it whenever possible.

In React it's definitely normal to have a list of fake data set in the state like in your example. You usually would import it from a different file though with the import syntax. But for better testability of your components, you are better off avoiding importing external libraries and instead passing it as parameters.

It's possible, but should be used with caution. As you can imagine, if everyone uses global variables, you can very easily end up with name collisions. Also, global variables are never garbage collected, so you risk littering the memory as well.
Generally, if you write a framework in JavaScript, you'll publish one global variable, which sort of serves as the "namespace" of your framework: Rx, d3, $, Handlebars, etc. These are usually the same as the name of the framework itself, so collisions are unlikely. Everything else is then defined within that object, e.g. Handlerbars.compile() and so on.