Click here to Skip to main content
15,881,715 members
Home / Discussions / ASP.NET
   

ASP.NET

 
AnswerRe: Unordered List Items are not displaying in horizontal Pin
Richard Deeming25-Sep-19 2:42
mveRichard Deeming25-Sep-19 2:42 
GeneralRe: Unordered List Items are not displaying in horizontal Pin
simpledeveloper25-Sep-19 5:30
simpledeveloper25-Sep-19 5:30 
AnswerRe: Unordered List Items are not displaying in horizontal Pin
Anandkumar Prajapati27-Sep-19 22:52
professionalAnandkumar Prajapati27-Sep-19 22:52 
GeneralRe: Unordered List Items are not displaying in horizontal Pin
simpledeveloper30-Sep-19 12:14
simpledeveloper30-Sep-19 12:14 
QuestionConvert the following jQuery function into React or what shall I do to have same functionality Pin
simpledeveloper24-Sep-19 11:04
simpledeveloper24-Sep-19 11:04 
AnswerRe: Convert the following jQuery function into React or what shall I do to have same functionality Pin
jkirkerx24-Sep-19 11:30
professionaljkirkerx24-Sep-19 11:30 
GeneralRe: Convert the following jQuery function into React or what shall I do to have same functionality Pin
simpledeveloper24-Sep-19 14:06
simpledeveloper24-Sep-19 14:06 
QuestionImporting all images into React Inline component which is const Pin
simpledeveloper24-Sep-19 10:40
simpledeveloper24-Sep-19 10:40 
Hi all, I am Trying to convert an ASP.Net MVC jQuery application into ASP.Net React API application, in a situation I needed to import multiple images from almost same folder or folders from same root directories, hence I decided to write a function that returns array to be able to read the image url in the component.
For some reason its giving me error, here in this below Code I am attempting to write function within const but if I can write it in a separate js or jsx file for common usage and reference it in my const component it would be really helpful for me. But before that I am getting a syntax error as below in the line at "const"
const images = importAll(require.context('./images', false, '/\.png/'));


My full code for this component is as below:
import React from 'react';
import { connect } from 'react-redux';
import '../css//bootstrap.css'
import ArbHeader from '../images/header/arbclassic-ca.png'
import ArbClassicTwitter from '../images/header/arbclassic-twitter.png'
import xxxx from '../images/header/arbclassic-linkedin.png'
import CalxxxInfo from '../images/header/arbclassic-ytube.png'
import xxxClassicEmail from '../images/header/arbclassic-email.png'
import HeaderOrganization from '../images/header/header_organization.png'
import ARBFooterTwitter from '../images/footer/twitter.png'
import ARBFooterYouTube from '../images/footer/youtube.png'
import ARBFooterLinkedIn from '../images/footer/linkedin.png'
import ARBFooterEmail from '../images/footer/email.png'

let url = '../images/header';


const Dashboard = (props) => (
    function importAll(r) {
        let images = {};
        r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
        return images;
    }

const images = importAll(require.context('./images', false, '/\.png/'));

    <React.Fragment>
        <header>
            <div className="header-top-outer container-fluid">
                <div className="container">
                    <ul className="header-top">
                        <li><a href='http://www.ca.gov' target="_blank"><img src={ArbHeader} alt="California dot gov website" /></a></li>
                        <li><a href='https://twitter.com/xxxResources' target="_blank"><img src={ArbClassicTwitter} alt="xxx Resources Board Twitter" /></a></li>
                        <li><a href='https://www.youtube.com/user/calxxxinfo' target="_blank"><img src={CalxxxInfo} alt="xxx Resources Board Youtube" /></a></li>
                        <li><a href='https://www.linkedin.com/company/california-xxx-resources-board' target="_blank"><img src={xxxx} alt="xxx Resources Board LinkedIn" /></a></li>
                        <li><a href='https://public.govdelivery.com/accounts/xxxx/subscriber/new?topic_id=listserv' target="_blank"><img src={xxxClassicEmail} alt="xxx Resources Board Email" /></a></li>
                    </ul>
                </div>
            </div>
            <div className="container">
                <div className="header-bottom clearfix">
                    <div className="float-left">
                        <a href="http://arb.ca.gov"><img src={HeaderOrganization} className="xxxx-logo" alt="California xxx Resources Board Logo" /></a>
                    </div>
                    <nav>
                        <ul className="nav float-right">
                            <li className="nav-item"><a className="nav-link" href="https://ww2.arb.ca.gov/community-xxx-quality-portal">Home</a></li>
                            <li className="nav-item"><a className="nav-link" href="about.html">About</a></li>
                            <li className="nav-item"><a className="nav-link active" href="index.html">Preview</a></li>
                            <li className="nav-item"><a className="nav-link" href="data.html">Access Data</a></li>
                            <li className="nav-item"><a className="nav-link" href="mailto:aqview@arb.ca.gov">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <footer>
            <div className="footer-outer container-fluid">
                <div className="footer-container container">
                    <div className="row">
                        <div className="footer-left col-md-6">
                            <h2>Contact Us</h2>
                            <a href="tel:8002424450">(800) 242-4450</a> | <a href="mailto:helpline@arb.ca.gov">helpline@arb.ca.gov</a>
                            <p>1001 I Street, Sacramento, CA 95814</p>
                            <p>P.O. Box 2815, Sacramento, CA 95812</p>
                            <p className="version">AQView Version 1.0</p>
                        </div>
                        <div className="footer-right col-md-6">
                            <div className="footer-right-social-outer container-fluid">
                                <ul className="footer-right-social">
                                    <li><a href="https://twitter.com/xxxResources" target="_blank"><img src={ARBFooterTwitter} alt="Link to ARB Twitter" /></a></li>
                                    <li><a href="https://www.youtube.com/user/calxxxinfo" target="_blank"><img src={ARBFooterYouTube} alt="Link to ARB YouTube" /></a></li>
                                    <li><a href="https://www.linkedin.com/company/california-xxx-resources-board" target="_blank"><img src={ARBFooterLinkedIn} alt="Link to ARB LinkedIn" /></a></li>
                                    <li><a href="https://public.govdelivery.com/accounts/xxxx/subscriber/new?topic_id=listserv" target="_blank"><img src={ARBFooterEmail} alt="Link to ARB Email" /></a></li>
                                </ul>
                            </div>
                            <ul className="footer-nav">
                                <li><a href="https://ww2.arb.ca.gov/accessibility">Accessibility</a></li>
                                <li><a href="https://ww2.arb.ca.gov/xxxxis-privacy-and-conditions-use">Privacy Policy</a></li>
                                <li><a href="https://ww2.arb.ca.gov/xxxxis-privacy-and-conditions-use">Conditions of Use</a></li>
                                <li><a href="https://www.arb.ca.gov/capcoa/roster.htm">Local xxx Districts</a></li>
                                <li><a href="http://registertovote.ca.gov/" target="_blank">Register to Vote</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </React.Fragment>
);

export default connect()(Dashboard);


Any help would be greatly helpful - thanks in advance.

modified 24-Sep-19 19:29pm.

AnswerRe: Importing all images into React Inline component which is const Pin
jkirkerx24-Sep-19 11:41
professionaljkirkerx24-Sep-19 11:41 
GeneralRe: Importing all images into React Inline component which is const Pin
simpledeveloper24-Sep-19 19:44
simpledeveloper24-Sep-19 19:44 
GeneralRe: Importing all images into React Inline component which is const Pin
simpledeveloper24-Sep-19 13:51
simpledeveloper24-Sep-19 13:51 
GeneralRe: Importing all images into React Inline component which is const Pin
simpledeveloper2-Oct-19 8:06
simpledeveloper2-Oct-19 8:06 
GeneralRe: Importing all images into React Inline component which is const Pin
jkirkerx2-Oct-19 13:00
professionaljkirkerx2-Oct-19 13:00 
QuestionQuery value is passed correctly but does not return any results in the query API string Pin
hm918-Sep-19 4:27
hm918-Sep-19 4:27 
AnswerRe: Query value is passed correctly but does not return any results in the query API string Pin
Richard Deeming18-Sep-19 7:35
mveRichard Deeming18-Sep-19 7:35 
GeneralRe: Query value is passed correctly but does not return any results in the query API string Pin
hm918-Sep-19 9:02
hm918-Sep-19 9:02 
GeneralRe: Query value is passed correctly but does not return any results in the query API string Pin
jkirkerx18-Sep-19 12:26
professionaljkirkerx18-Sep-19 12:26 
QuestionError: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
Member 245846716-Sep-19 23:07
Member 245846716-Sep-19 23:07 
AnswerRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
Richard Deeming17-Sep-19 0:39
mveRichard Deeming17-Sep-19 0:39 
GeneralRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
Member 245846717-Sep-19 18:37
Member 245846717-Sep-19 18:37 
GeneralRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
Richard Deeming18-Sep-19 0:37
mveRichard Deeming18-Sep-19 0:37 
AnswerRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
F-ES Sitecore18-Sep-19 2:36
professionalF-ES Sitecore18-Sep-19 2:36 
GeneralRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
Member 245846718-Sep-19 21:14
Member 245846718-Sep-19 21:14 
GeneralRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
F-ES Sitecore18-Sep-19 22:06
professionalF-ES Sitecore18-Sep-19 22:06 
GeneralRe: Error: It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level Pin
Member 245846718-Sep-19 23:36
Member 245846718-Sep-19 23:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.