Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
108 views
in Technique[技术] by (71.8m points)

javascript - mapping of object to a child component in a ternary operator

when a user selects a project I am trying to map the returned object inside (filterproject) to a child component called projectText. This mapping occurs inside a useEffect hook with a ternary operator but I get the error "Expected an assignment or function call and instead saw an expression"

How do I map the child component with the {filterproject} object?

Below is the Parent Component

import React, { useRef, useEffect, useState, useCallback } from "react";
import projectsData from '../data/projectsData';
import Project from './Projects';
import projectText from './ProjectText';


const App = (props) => {
  const [projects] = useState(() => (projectsData.map((project) => <Project id={project.id} project={project} projectClick={() => {setFilterProject(project)}}/>)));
  const [filterKey, setFilterKey] = useState("*");
  const [filterproject, setFilterProject] = useState(false);
  const [selproject, setSelProject] = useState();

  useEffect(() => {
    if (filterproject) {
      filterproject !== false
        ? setSelProject(() => filterproject.map((selected) => <projectText id={selected.id} project={selected}/>))
        : console.log("no selected project")
    }
  },
  [filterproject]);

    return (
      <body>
        <div id='sepLine'>
        <div id="visHolder">
           <div id="visContainer" style={{position: "relative", width: "840px", height: "1823px"}} >
             {projects}
           </div>          
         </div>
       </div>
        <div id='projectText'>
        {projectText}
       </div>
      </body>
    );
}

export default App;

And the child component looks like the following:

import React from "react";
import * as d3 from "d3";

const projectText = (props) => {
    const { selproject } = props;
    return(
        <div className="descriptionText">
            <h2 className="descrHead">{selproject.subtitle}</h2>
            <h4>{selproject.title}</h4>
            <h4>{selproject.start} | {selproject.kind}</h4>
            <div>
                <a href={selproject.link} target="_blank">
                    <img src={selproject.image} alt= {selproject.subtitle} className="descriptionImage"></img>
                    <span className="descriptionLink">enter</span>
                </a>
            </div>
            {selproject.description}
        </div>
    )
}
export default projectText

{filterproject} object when selected shown below {id: , title: ,etc}

object to map

Any help would be appreciated. Thanks in advance!

question from:https://stackoverflow.com/questions/65647496/mapping-of-object-to-a-child-component-in-a-ternary-operator

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...