Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I successfully created a drop-down form which switch views between data. The option value of “all” is the default view to show all incoming data, while “servicedesk” shows a selection of the data. The “card-list” class styles both option values for now. How would I create two separate classes for both “all” and “servicedesk” when they are selected/rendered? My goal is to style the option values differently from one another, and I am unsure on how to do this with props.children.

// App.js
const App = () => {
  const [results, setResults] = useState([]) 
  const [filter, setFilter] = useState('all');

  useEffect(()=>{
    axios.get('/api/')
      .then(res => {
        setResults(res.data.result)
      });
  },[]);

  const Filter = () => {
    return (
        <form className="filter">
            <select value={filter} onChange={(e)=> setFilter(e.target.value)}> 
                <option value="all">All Queues View</option>
                <option value="servicedesk">Service Desk View</option>
            </select>
        </form>
    )
  }

  const Results = () => {
    return (
        <ul>
         {
            results.filter(results => results.u_react_view.includes(filter)).map(i => (         
               <li key={i.sys_id}><h1>{i.u_queues}</h1></li>         
            ))
        }
       </ul>
    )
    }

  return (
    <div>
      <Filter/>
      <Results/>
    </div>
  )
}

// card-list.jsx
export const CardList = props => {
    return <div className='card-list'>
        {props.children}</div>;
};


What I have tried:

I tried looking at tutorials, but most deals with classes instead of hooks so I'm a bit unsure of the direction to go forward with.
Posted
Updated 2-Mar-21 6:49am

1 solution

The best way to do this may be to think of your form as two separate forms occupying the same space.

If you create the form content as a long text string you can easily swap one for the other using the DOM's innerHTML member.

Another options is to use the setAttribute() member function for, after all, classes and styles are really just attributes of an element.

Yet another way - giving the form's as two totally separate but overlapped forms and you can modify the z-index to put one on top and it's submit button referres to its own content.

That's three ways to go about it.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900