We Keep Coding

Why are my React image imports not working?

PLEASE SEE UPDATE BELOW
This is my first time posting on stack overflow because usually I can find answers but I simply can't this time. I'm using React for the first time in a few months and just trying to show some images on the page. The imports are not working at all.
Here is where I put them
filestructure
I created an index.js inside in order to export all of them at once:
const images =
{
image1: require("./001.jpg").default,
image2: require("./002.jpg").default,
image3: require("./003.jpg").default,
image4: require("./004.jpg").default,
image5: require("./005.jpg").default,
image6: require("./006.jpg").default,
image7: require("./007.jpg").default,
image8: require("./008.jpg").default,
image9: require("./009.jpg").default
}
export default images;
I also tried similar things with an array (which is what I wanted) and with ES6 imports in case that was the issue.
I then have attempted to use them here:
import React from 'react'
import images from "../photos/index.js"
import Photo from "./Photo";
function PhotoList() {
const photoComponents = Object.values(images).map(
image => {
return <Photo photo={image}/>
}
)
return(
<div>
{photoComponents}
</div>
)
}
export default PhotoList
I have also tried to display just a single image using directly here and that also is broken, so it's not the Photo component that's broken, and apparently not the mapping either. It's just the imports.
And here we have the page. Everything else shows:
import React from 'react'
import Navbar from './Navbar';
import "./main.css";
import PhotoList from "./Photo";
function mainPage() {
return (
<div className="mainPage">
<h1>Jei Ganiyeva</h1>
<Navbar/>
<PhotoList/>
</div>
)
}
export default mainPage;
And it shows up like this:
broken image on site
What is up with this? I can't seem to find any answers apart from people importing things wrong which I am not doing. Well, I assume I'm doing something wrong, but not in the way they are.
Thank you in advance for your help.
UPDATE:
It appears the Photo component is not receiving any props no matter what it is. See here, I have replaced the mapping with passing a simple integer variable and simply showing it as a h1 in Photo:
import React from 'react'
import {images} from "../resources/photoInfo.js"
import Photo from "./Photo";
function PhotoList() {
// const photoComponents = images
// .map(image => {
// return(
// <Photo className="photo" source={image}/>
// )
// });
const image = 100;
return <div><Photo source={image}/></div>
}
export default PhotoList
import React from 'react'
function Photo({source}) {
return (
<div>
<h1>{`The props are ${source}`}</h1>
</div>
)
}
export default Photo
This results in the following screen:

Okay, I have found the solution to this and am answering myself just for a reference for anyone who googles this. However, I doubt anyone will have exactly the same problem.
Basically, in the main page, you can see above that I'm actually importing PhotoList from "./Photo" not "./PhotoList" as intended. This means that the logic held within PhotoList that passed the props to Photo was not being used. This also explains why I never saw anything in the console when I tried to console.log from PhotoList. So, if anyone else does have a mystery problem like this, check whether all parts of your code are being reached at all!

What is the React Sigma style file mentioned in their setup documentation?

This is my first time making graphs in React so I'm following the guide and documentation. I have no prior experience with graphology, sigma.js or react-sigma (I know how to use normal React).
The setup documentation says:
Import the React Sigma style file in your application. Example : import "#react-sigma/core/lib/react-sigma.min.css"
What are style files? CSS? How can I make one? I can't find any documentation. Is it something basic from a previous library?
Honestly I'm finding it very hard to learn sigma.js and insert it in my react website. I can't find any guides. Are there any? I just want to start with a simple graph and learn from there.

The documentation refers specifically to their own CSS file which must be imported in a React app like they are showing in the example:
import "#react-sigma/core/lib/react-sigma.min.css";
Disclaimer: depending on your React app setup, the way to import a CSS file might differ.
The example in the documentation was broken when I wrote this answer. I opened an issue on the react-sigma repo and it was fixed since then.
When I tried it, some dependencies were missing and some changes were needed.
npm install #react-sigma/core sigma graphology graphology-types lodash
import { useEffect } from "react";
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "#react-sigma/core";
// Import the style file here
import "#react-sigma/core/lib/react-sigma.min.css";
export const LoadGraph = () => {
// first change to their example
const loadGraph = useLoadGraph();
// also wrapped their graph instantiation side-effect with useEffect
useEffect(() => {
const graph = new Graph();
graph.addNode("first", {
// Required position
x: 1,
y: 1,
size: 15,
label: "My first node",
color: "#FA4F40"
});
// Calling the function that was missing from the example
loadGraph(graph);
}, [loadGraph]);
// Returning null to get a valid component
return null;
};
export const DisplayGraph = () => {
return (
<SigmaContainer style={{ height: "500px", width: "500px" }}>
<LoadGraph />
</SigmaContainer>
);
};
Note that I used TypeScript for the example, which gives insightful error messages since react-sigma provides its own types.
Then it was clear that the useLoadGraph hook wasn't used properly since it doesn't accept any parameter and it returns a function accepting a graph parameter. This can be confirmed with the API documentation.
I also figured that lodash was missing from errors in the developer console.
Please refer to the documentation as it's now up-to-date.

Determine javascript framework based on importation

I am writing a python script that determine the type of javascript framework used in file, I am having issue in detecting when whether the code is node.js file or react.js file. I tried detecting via importation , so far when I have import React from 'react'; I know directly it is react file , but the problem is when we don't have react importation but the file is part of react project ( for eg file contain reducer, hooks) and I have have othe importation, my idea is to to check whether that importation is react , the problem is even if I check npm registry it don't give me info about whether the package is for node.js apps or for react or other. For example this code ,how can I determine whetehr it is node or react or other ?
import { GraphQLScalarType } from 'graphql';
import { Kind } from 'graphql/language';
const LowercaseString = new GraphQLScalarType({
name: 'LowercaseString',
description: 'Returns all strings in lower case',
parseValue(value) {
return value.toLowerCase();
},
serialize(value) {
return value.toLowerCase();
},
parseLiteral(ast) {
if (ast.kind === Kind.STRING) {
return ast.value.toLowerCase();
}
return null;
},
});
export default LowercaseString;

react-native asking Android runtime permission

I'm trying to ask for Android permissions within my React Native app. I followed the official documentation here and I get this runtime error (from the react-native log-androidcommand) :
W ReactNativeJS: undefined is not an object (evaluating 'PermissionsAndroid.PERMISSIONS.CAMERA')
This is the code I actually have :
My import (generated by WebStorm) :
import * as PermissionsAndroid from "react-native";
The code that actually ask for the permission :
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
'title': 'A title',
'message': 'A message'
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
return true;
} else {
return false;
}
} catch (err) {
console.warn(err)
}
}
I can't understand why this doesn't work since it comes from the official documentation.

In short words: you should import a single member of react-native module. This will look like this:
import { PermissionsAndroid } from 'react-native';
What causes the problem is your import syntax. In your example you are importing the whole react-native module as PermissionAndroid variable in your module. But as you see from my code line you need only a single member from the whole package.
As for me, it was really a good idea to try different ES6 import syntax in real world and to get used to them.

react Error in ./src/App.js 'store' is not defined

attempting to follow this tutorial
https://thinkster.io/tutorials/setting-up-react-redux/introducing-react-redux
App.js file-
import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps = state => ({
appName: state.appName
});
class App extends React.Component {
render() {
const onClick = () => store.dispatch({ type: 'TOGGLE' });
return (
<div>
{ this.props.appName }
</div>
);
}
}
export default connect(mapStateToProps, () => ({}))(App);
according to the video, by importing the connect function and defining mapStateToProps we will get access to store. it does not work.
also, the code in the video is different from the code in the guide.
so at this point i'm not sure if i'm doing something incorrectly, or if this guide is just bad. can anyone suggest a better guide for learning react?
full error message-
Failed to compile.
Error in ./src/App.js
c:\Sites\react_frontend\django-frontend\src\App.js
14:11 warning 'onClick' is assigned a value but never used no-unused-vars
14:27 error 'store' is not defined no-undef
✖ 2 problems (1 error, 1 warning)

This tutorial is not very good - a lot of things are missing.
A previous step had the following line:
const store = createStore(reducer);

I am also using Thinkster and the line below worked for me. I found that there is no need to provide the empty object at all.
export default connect(mapStateToProps)(App);
I agree with you that the react redux tutorial is quite poorly done. I found that the Backend Tutorials(Express and mongo) was a lot more cohesive than the front end. The tutorials linked together well and each one started where the other left off.